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>

我将弹出窗口设置为位置absolute。我还将标题设置为absolute，将left: 52%的位置设置为import to from 'await-to-js'; // If you use CommonJS (i.e NodeJS environment), it should be: // const to = require('await-to-js').default;，以使它们停留在屏幕左侧的正确位置。

是否有可能使一个绝对div覆盖另一个div？

Answer 1

为您的#header div分配一个z-index：

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

或将其移至#visual之后的页面末尾。阅读stacking context和stacking without the z-index property

Answer 2

只需添加

#header:not(.collapsed) {

上课

{{1}}

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

2 个答案: