CSS - 如何堆叠两个<div>元素相互叠加在一起调整大小？</div><div id="text_translate"><p> 我正在尝试将两个&lt;div&gt;组件堆叠在一起，它们也可以根据 window 大小自动调整大小 - 这意味着两个&lt;div&gt;之一将始终位于另一个之上。</p><p> 我想知道这是否可能，有两个不同的 div 组件是position: relative和自动调整大小？ 我相信可以用一个position: absolute参与（ <a href="https://stackoverflow.com/questions/1834831/how-to-position-two-divs-above-each-over/1834868" rel="nofollow noreferrer">如何 position 两个 div 在每个上方</a>）。</p></div>

Question

我正在尝试将两个<div>组件堆叠在一起，它们也可以根据 window 大小自动调整大小 - 这意味着两个<div>之一将始终位于另一个之上。

我想知道这是否可能，有两个不同的 div 组件是position: relative和自动调整大小？ 我相信可以用一个position: absolute参与（ 如何 position 两个 div 在每个上方）。

Answer 1

要将 div 堆叠在另一个 div 之上，您需要使用 position: absolute。 但是，您可以将它们都放在包含 position: relative 的 div 中。 要相对于 window 大小使用 vh 和 vw。

 .container { background-color: green; position: relative; left: 10vw; top: 25vh; height: 50vh; width: 80vw; }.box-one { background-color: red; height: 80%; width: 80%; position: absolute; left: 0px; top: 0px; z-index: 1; }.box-two { background-color: blue; height: 80%; width: 80%; position: absolute; left: 0px; top: 0px; }

 <div class="container"> <div class="box-one"></div> <div class="box-two"></div> </div>

vw 和 vh 是长度单位，分别代表视口宽度 (vw) 和高度 (vh) 的视口大小的 1%。

z-index 指定元素的堆栈顺序。 具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。

盒子一（红色）将堆叠在盒子二（蓝色）的顶部。 box-one 和 box-two 将占据容器的 80%。

Position：绝对； 该元素相对于其第一个定位（非静态）祖先元素进行定位。

哦，如果您使用的是反应，请将 class 更改为 className