CSS-position:absolute是堆疊影像-有解無憂

我的 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 上。

我很確定問題出在“位置：絕對；” 在“中心”班級，但我可能是錯的。

uj5u.com熱心網友回復：

如果每個元素.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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353042.html

標籤：html css 堆位置绝对

上一篇：如何在Databricks中配置自定義Spark插件？

下一篇：Tailwindcss不適用于NextJS鏈接標簽