html - 如何通过相对定位将div层叠在一起

Question

我需要将两个透明的 div 放在彼此之上，然后仅使用 CSS 根据百分比值将它们相互垂直移动。如果百分比值为 20%，我希望它看起来像这样:

在此示例中，div 为 100x100px，父 div 仅具有 10px 的左右填充，这导致垂直位置有 20% 的差异。代码如下所示:

<div class="parent" style="padding: 0 10px;">
    <div class="child left"></div>
    <div class="child right"></div>
</div>

.parent {
    position: relative;
    display: inline-block;
    border: 1px solid black;
    min-width: 100px;
    height: 100px;
}

.child {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    opacity: 0.5;
}

.child.left {
    left: 0;
    background-color: red;
}

.child.right {
    right: 0;
    background-color: green;
}

但是我实际上并不知道我的 CSS 生产版本中的 div 的大小，这就是为什么我需要能够使用相对百分比值而不是像素来分隔它们。

这是示例的一个 fiddle ，一个失败了:

http://jsfiddle.net/rva18302/

我可以以任何方式更改标记，唯一的要求是根 div 动态调整自身大小以适应子 div，并且子 div 保持相同的纵横比(正方形)。

Answer 1

它有效，但它显然与您的页面相关，因为百分比是一个可变值，而像素是一个固定值。您不能将 10px 假设为 10% 并相信它会起作用。

以你的例子为例，我已经改变了百分比值并且它起作用了。

DEMO

代码更改:

<div class="parent" style="padding: 0 1.5%;">

希望这对您有所帮助。