如何使用 CSS 使 HTML 元素动态重叠

Question

我正在尝试设置我的图片库的样式，以便下一个和上一个按钮位于侧面，展开的按钮将位于角落并动态地保持在它们的位置，这就是我到目前为止得到的

这是我的代码结构

<div className="container">
  <i className="fa-solid fa-expand" />
  <div className="left-arrow" onClick={goPrevious}>❰</div>
  <img className="gallery-images" src={${photos[currentIndex].url}} alt="" />
  <div className="right-arrow" onClick={goNext}>❱</div>
  <div className="dot-container"> {photos.map((photo, index) => ( <div className="dot" key={index} onClick={()=> goToPhoto(index)}> ● </div> ))}     
  </div>
</div>

Answer 1

MDN 上的这些文章将帮助您开始使用所需的 CSS：

我建议相对于其父容器定位展开按钮，更多信息： https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

如果您将父容器设为 flexbox，则箭头应位于图像的左侧和右侧，更多信息： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

如果您需要进一步的帮助，还请提供剪下的 CSS 代码。