html - 重叠 div 的动态/响应解决方案

Question

我正在开发越来越多的设计包含重叠元素的网站，例如顶部带有图像的文本框。

这是我试图完成的一个例子: https://i.imgur.com/tO4ahQX.jpg

我试图为它找到一个好的解决方案，它可以很容易地做出响应，并且如果内容管理员决定使文本更长，则不会被破坏。并且最好还可以很容易地制作动画或制作视差。

目前我在第二个元素上使用负边距:

<div class="back"></div>
<div class="front" style="margin-top:-200px;"></div>

但这可能不是一个好的解决方案。

如果经常在这里问这个问题，我提前道歉。

Answer 1

您在右侧 div 上使用 margin-top 的解决方案有效。

另一个解决方案是在两个 div 上使用 absolute 定位。

使用 position: absolute，您可以为每个 div 指定一个 z-index。然后给.front一个比.back更高的z-index，定位.front“在”之上.back.

假设您希望两个 div 在页面中作为一个组居中，但始终保持相同的位置和彼此之间的距离:

/* All px amounts are a wild guess. You can adjust to achieve the desired affect. */

.front {
    position: absolute; 
    top: calc(50% - 250px);
    left: calc(50% - 275px);
    z-index: 2;
}

.back {
    position: absolute;
    bottom: calc(50% - 250px);
    right: calc(50% - 275px);
    z-index: 1;
}  

假设您希望两个 div 锚定在各自的边上，只有在屏幕足够小的情况下才会重叠:

/* all top, left, bottom, and right values are approximations. */

.front {
    position: absolute; 
    top: 25px;
    left: 25px;
    z-index: 2;
}

.back {
    position: absolute;
    bottom: 25px;
    right: 25px;
    z-index: 1;
}