Html 如何使用相对定位将div分层到彼此的顶部

我需要将两个透明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的大小，这就是为什么我需要能够用相对百分比值而不是像素来分隔它们

下面是一个失败的例子：

---

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

它可以工作，但它显然可以相对于页面工作，因为百分比是一个可变值，像素是一个固定值。你不能假设10px为10%并相信它会起作用

以你为例，我改变了百分比值，它是有效的

代码更改：

---

希望这能有所帮助。

我不知道我是否完全理解你的问题，但如果你想“用相对百分比值而不是像素来分隔它们”，并保持对父div的响应，你可以将宽度设置为百分比，它应该可以工作

例如：

.child {
  width:90%;
 }
.parent {
  width:100%;
}

---

你能用伪元素来做这个吗

div{ 利润率：10px； 高度：100px； 宽度：100px； 位置：相对位置； } 部门：以前{ 内容：； 位置：绝对位置； 排名：0； 左-10%； 身高：100%； 宽度：100%； 背景：红色； 不透明度：0.5； } 部门：之后{ 不透明度：0.5； 内容：； 位置：绝对位置； 排名：0； 右图：-10%； 身高：100%； 宽度：100%； 背景：绿色； }

---

是的，我知道百分比值是相对于父项的，我只是提供了一个坏例子：这里有另一个，也许更好，坏例子：。子项的位置现在是正确的，但要求父/根div必须占用其子项的所有空间的要求却失败了。@q-为此，您需要将宽度保持为“自动”，并使div具有内联块属性才能工作。不幸的是，这似乎也不起作用，请参见红色边框。我正在使用firefox，可以看到边框占据整个宽度。你在看什么浏览器？是的，我刚刚注意到firefox中也有同样的浏览器，最初使用的是chrome。嗯，这很奇怪……忘了提到child div需要保持相同的大小，100x100px，或者至少保持相同的方形宽高比。Calc很有趣，以前从未见过：似乎在所有现代浏览器中都没有完全的支持，特别是android。我不能使用100px，因为我不知道我要在哪里实现它的孩子的大小。很好的解决方案！我应该学会更频繁地使用伪元素：但是我不能使用它，因为它会与其他内容重叠，请参见。@TheQ:将边距添加到“test”div中如何？那我就得知道它的宽度了。我开始认为这个问题不能以我想要的方式解决，我将开始寻找其他解决方案。