仅在div内修复元素的位置

Question

我有波纹管代码 - 我正在努力制作“嘿！”仅固定在白色容器内。我尝试在margin-left:0;margin-top:0中使用position:fixed，z-index将其隐藏在红色和黑色容器中，但它不起作用。

<div style="height:1000px;background:red;">
</div>
<div style="height:400px;">
  <div style="position:fixed;border:thin solid blue;top:0;left:0;">
    hey!
  </div>
</div>
<div style="height:1000px;background:black;">
</div>

Answer 1

固定位置使元素保持相对于整个文档...而不是特定容器。您要么使用javascript，要么重新考虑解决方案（取决于您实际想要实现的目标）

如果你真的想要使用固定位置，并且你的red div总是位于文档的最顶层，你可以使用类似的东西

hey将永远存在（甚至在红色div之外和黑色div之内）但它将被z-index隐藏。你还需要在黑色div上设置position，以便z-index产生任何影响

＆＃13;

＆＃13;

body {
margin:0;
}

＆＃13;

<div style="height:1000px;background:red;z-index:0;position:relative">
</div>
<div style="height:400px;">

    <div style="position:fixed;border:thin solid blue;top:0;left:0;z-index:1;">
hey!
    </div>
</div>
<div style="height:1000px;background:black;position:relative;z-index:2;">
</div>

＆＃13;

＆＃13;

＆＃13;