在比例上，底部的模糊元素與縮放的元素重疊

目標：縮放后的??元素不與底部元素重疊。

問題：使用 css transition，我添加scale了一個元素。在父元素中，子元素上方和下方的內容是模糊的。但不幸的是，較低的模糊效果與被遺忘的容器重疊。

問題我該怎么做才能使模糊效果不覆寫縮放的容器？

注意： z-index對我沒有影響。

我的堆疊Linux / Firefox

我的代碼

.container>*:not(.box) {
  background: black;  
  filter: blur(8px);  
  transition: filter 1s, background 1s;  
  filter: blur(8px); 
}
.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
  transition: scale 1s, background 1s, filter 1s;   
}
.box:focus-within {
  transition: scale 1s, background 1s; 
  scale: 1.8;
  background: lightblue;  
}

<div class="container">
  <p>some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div class="box">
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

uj5u.com熱心網友回復：

添加position: relative（創建一個新的堆疊背景關系）和一個z-index（你可以在這里自學）：

.container>*:not(.box) {
  background: black;  
  filter: blur(8px);  
  transition: filter 1s, background 1s;  
  filter: blur(8px); 
}
.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
  transition: scale 1s, background 1s, filter 1s;
  position: relative;
  z-index: 1;
}
.box:focus-within {
  transition: scale 1s, background 1s; 
  scale: 1.8;
  background: lightblue;  
}

<div class="container">
  <p>some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div class="box">
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

uj5u.com熱心網友回復：

通常，當您將元素從上到下放置而沒有任何具有 z-index 的元素時，CSS 會表現得很奇怪，因此在您的代碼中，當您單擊輸入時，框的頂部通常（在縮放之前）第一個 p 元素保留在那里，沒有模糊但底部（第二個 p 元素）有模糊。

因此，即使您不向任何元素添加 z 索引，它的行為也一樣

<div class="container">
  <p class="firstPelement">some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div class="box">
    <div>
      <input >
      <input >
    </div>
  </div>
  <p class="secondPelement">some text againsome text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

.firstPelement -> z-index 0

.box -> z-index 1

.secondPelement -> z-index 2

這就是為什么頂部不模糊但底部模糊但是當您將 z-index 添加到

.box{
  position:relative;
  z-index:1;
}

它現在表現的任何元素都具有 z-index:0 但只有 .box 具有 z-index:1

問題：您認為如果我設定容器或僅設定盒子位置：相對位置會有所不同嗎？

如果將 z-index 添加到容器中，所有元素都有 z-index:1 但內部 z-index 規則仍然相同，頂部不模糊但底部模糊

標籤：css

上一篇：如何在一行中對齊div組件？

下一篇：如何使用CSS隱藏/洗掉閃亮R中的tabBox灰色邊框