CSS - 位置：绝对是堆叠图像[重复]答案

【问题标题】：CSS - position: absolute is stacking images [duplicate]CSS - 位置：绝对是堆叠图像[重复]
【发布时间】：2021-12-21 16:09:45
【问题描述】：

我的 HTML 是

    <section class="container">
        <div class="tiktok">
            <img src="img/langhe.jpeg" class="blurredImg">
            <img src="img/pp.jpeg" class="center">
        </div>

        <div class="tiktok">
            <img src="img/langhe.jpeg" class="blurredImg">
            <img src="img/pp.jpeg" class="center">
        </div>

        <div class="tiktok">
            <img src="img/langhe.jpeg" class="blurredImg">
            <img src="img/pp.jpeg" class="center">
        </div>
    </section>

我的 CSS 是：

.container {
height:100%;
width: 100%;
overflow-y: scroll;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(3rem);
scroll-snap-type: y mandatory;
position: relative;
z-index: 1;
border: none;
}

.blurredImg{
width: 100%;
height: 100%;
filter: blur(8px);
-webkit-filter: blur(8px);
}

.tiktok {
height: 100%;
width:100%;
background-color: black;
scroll-snap-align: start;
}

.center{
margin: auto;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
border: 10px solid white;
}

虽然“langhe.jpeg”一个接一个地显示在 3 个不同的 div 中，但“pp.jpeg”图像一个接一个地显示，而不是每个都显示在一个 div 上。

我很确定问题出在“位置：绝对；”在“中心”类中，但我可能错了。

【问题讨论】：

标签： html css stack position absolute

【解决方案1】：

如果每个带有.center 的元素都有position: absolute，那么你需要在父元素上设置position: relative (.tiktok)

.container {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(3rem);
  scroll-snap-type: y mandatory;
  position: relative;
  z-index: 1;
  border: none;
}

.blurredImg {
  width: 100%;
  height: 100%;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.tiktok {
  height: 100%;
  width: 100%;
  background-color: black;
  scroll-snap-align: start;

  /* Added by me */
  position: relative;
}

.center {
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 10px solid white;
}

<section class="container">
  <div class="tiktok">
    <img src="https://picsum.photos/200" class="blurredImg">
    <img src="https://picsum.photos/200" class="center">
  </div>

  <div class="tiktok">
    <img src="https://picsum.photos/200" class="blurredImg">
    <img src="https://picsum.photos/200" class="center">
  </div>

  <div class="tiktok">
    <img src="https://picsum.photos/200" class="blurredImg">
    <img src="https://picsum.photos/200" class="center">
  </div>
</section>

【讨论】：

有效！谢谢！