CSS-position:absolute是堆叠图像

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"；图像是一个挨一个显示的，而不是每个显示在一个单一的分区上

我很确定这个问题是关于"；位置：绝对"在"；中心"；课上，但我可能错了。

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>