父母親時的固定位置

Question

因此不確定這是否可行，但是根據我對規范的理解，位置固定元素的父元素應該是視口，而不是位置相對的父元素。

顯然，所有這些都適用於定位，但不適用於z-index 。

如果您看一下這個例子，

 .parent { height: 1000px; } .el-one { position: relative; z-index: 2; height: 100px; width: 100%; color: red; } .el-two { position: relative; z-index: 2; background-color: black; height: 500px; width: 100%; } .im-fixed { position: fixed; top: 0; left: 0; } 

 <div class="parent"> <div class="el-one"> <div class="im-fixed">Hello</div> </div> <div class="el-two"></div> </div> 

https://codepen.io/anon/pen/mmvXaE

如果向下滾動，則固定元素會在黑色部分的后面，我需要的是一種將紅色元素移到最前面而不將其移出el-one的方法。

我有一個項目，當您滾動經過它時，一些嵌入代碼需要固定，這是實際代碼的更好示例。 上面的示例僅以一種簡單的方式突出了該問題：

<div class="parent">
  <div class="el-one">
    <div id="my-wrapper">
      <iframe class="im-fixed"></iframe>
    </div>
  </div>
  <div class="el-two"></div>
</div>

，

我在網上發現這是我所認為的導致問題的原因： https ： //developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements，但沒有運氣解決方法。

我能想到的就是使用JS從編輯器放置嵌入代碼的位置移動元素，並在用戶滾動經過元素時將其放在主體之前。

還有其他人遇到或有任何想法嗎？

Answer 1

你想要這樣的東西嗎？ 將.el-one z-index增大到要重疊的z-index .el-one

 .parent { height: 1000px; } .el-one { position: relative; z-index: 99; height: 100px; width: 100%; color: red; } .el-two { position: relative; z-index: 2; background-color: black; height: 500px; width: 100%; } .im-fixed { position: fixed; top: 0; left: 0; } 

 <div class="parent"> <div class="el-one"> <div class="im-fixed">Hello</div> </div> <div class="el-two"></div> </div> 

Answer 2

使用以下內容：

.el-two {
  position: relative;
  z-index: -1;
  background-color: black;
  height: 500px;
  width: 100%;
}

Answer 3

有幾種方法可以解決此問題。 增加Z索引，清理div等。

我認為您正在嘗試使用粘性標頭功能。 位置CSS屬性有一個新值。

position: sticky

我已經清理了代碼，並刪除了所有Z-Index。 請檢查隨附的代碼段。

注意：僅Chrome和Firefox支持，IE不支持。

 .parent { background-color: green; position: relative; width: 100%; height: 5000px; } .header { position: sticky; top: 0px; left: 0px; height: 50px; background-color: yellow; } .el-one { background-color: blue; color: white; height: 100px; width: 100%; } .el-two { background-color: orange; height: 500px; width: 100%; } 

 <div class="parent"> <div class="header">I am a header</div> <div class="container"> <div class="el-one"> I am el-one </div> <div class="el-two"> I am el-two </div> </div> </div>