CSS

Question

我的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.

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

Answer 1

如果带有 .center 的每个元素都有 position: absolute，那么您需要在父级 (.tiktok)

上设置 position: relative

.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>

CSS - 位置：绝对是堆叠图像

CSS - position: absolute is stacking images

html

stack

position

absolute