html - 提高一个 div 在另一个之上

Question

我有两个 html div。

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red;" id="1">
<div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;" id="2">
</div>
</div>

这两个 div 位于同一个地方。因此，第二个 div 会在第一个 div 上产生。我想提高第一个 div 而不是第二个。

我可以通过改变两个 div 的位置来做到这一点:

    <div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;" id="1">

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red;" id="2">
    </div>
    </div>

可是我做不到。因为我想让#1 成为#2 的 sibling 。如何在不改变#1 和#2 位置的情况下做到这一点？

Answer 1

你把黄色的作为红色的 child ，在这种情况下就没有办法把红色的( parent )带到 child 的前面。

我所做的是让两个 div 成为 sibling 。通过这种方式，您可以控制 z-index 属性以将其中之一置于最前面。

<div style="height:100px;width:100px;position:fixed;left:0;top:0;background-color:red; z-index:10;" id="1"></div>
<div style="height:200px;width:200px;position:fixed;left:0;top:0;background-color:yellow;z-index:0;" id="2">
</div>