时间戳

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

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

问题描述

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

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

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

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

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

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

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

标签： htmlcss

解决方案

您使用margin-top正确的解决方案div。

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

使用position: absolute，您可以给divs 每个 a z-index。然后给出.front一个高于z-index，.back定位.front“上方” .back。

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

/* 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;
}

假设您希望将两个divs 锚定到各自的侧面，只有在屏幕足够小时才会重叠：

/* 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;
}

推荐阅读