Question

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

这是我尝试完成的实验： https://i.imgur.com/tO4ahQX.jpg

我试图为此找到一个好的解决方案，例如，如果内容管理者决定加长文本，则可以很容易地使它响应，而不会损坏它。并且最好还可以很容易地制作动画或制作成视差。

此刻，我在第二个元素上使用负边距：

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

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

如果在这里经常问到这个问题，我表示歉意。

Answer 1

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

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

使用position: absolute，您可以为div个分别赋予z-index。然后给.front比z-index更高的.back，将.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;
}

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

1 个答案: