我可以将div放在设置为“ position：absolute”的另一个div上吗？

Question

我有此页面，我希望能够在页面上包含一个弹出窗口。

https://bl.ocks.org/wdtglrn/raw/1ccf61e1912717d868dfe25dfde29bbe/402a25663023a41702fafe29e3f74d6077eb459f/

如果单击发现，您将看到三个标题下方的弹出窗口。

标题位于一个容器中，该容器是弹出窗口的同级容器。

//pop up
<section id="header" class ="collapsed">
  <h3>About</h3>
  <div id="dismiss">OK</div>
</section>

//titles
<div id="visual">
        <h3 id="channel"> Which channel brought the most customers? </h3>
        <h3 id="performance"> Which channel offered the best performance?</h3>
</div>

我将弹出窗口设置为position absolute。我还设置了标题absolute，left: 52%以便它们停留在屏幕左侧的正确位置。

是否可以让一个绝对div覆盖另一个绝对div？

Answer 1

给你的#headerdiv一个z-index：

#header {
    position: absolute;
    left: 65%;
    top: 1%;
    z-index: 1;
}

或将其移到页面末尾#visual。阅读有关堆栈上下文和不带z-index属性的堆栈的信息