CSS中的Z-index无效

小编典典

CSS中的Z-index无效

css

这个div

<div style="position: relative; z-index: 99;">123</div>

比这上面显示的

<div style="position: fixed; z-index: 3000;">456</div>

当我在第一个div中分配z-index：98时，一切都很好！如果需要，我可以提供更多代码。

阅读 342

2020-05-16

共1个答案

小编典典

z-index面向其父级-它们都在同一个父级元素中吗？z-index实现了自己的堆栈-例如：

框D，E和F是框C的后代->框F（z-index：-1）覆盖框B（z-index：1），因为它是框c的后裔（此框与z-索引：3，超出框b）

<div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;">
      <b>A:2</b>
    </div>

    <div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;">
      <b>B:1</b>
    </div>

    <div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3;
                border:1px solid #888; background:#eee;">
      <b>C:3</b>

      <div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;">
        <b>D:2</b>
      </div>

      <div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;">
        <b>E:3</b>
      </div>

      <div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;">
        <b>F:-1</b>
      </div>
    </div>

2020-05-16