如何通过相对定位将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的大小，这就是为什么我需要能够用相对百分比值而不是像素来分隔它们的原因

这是一个例子的小提琴，一个失败：

http://jsfiddle.net/rva18302/

我可以以任何方式更改标记，唯一的要求是root-div动态调整大小以适应子div，并且child-div保持相同的宽高比（正方形）。

Answer 1

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

举个例子，我改变了百分比值并且它有效。

<强> DEMO

代码更改：

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

希望这有帮助。

Answer 2

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

例如：

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

fiddle

Answer 3

你能为此使用伪元素吗？

＆＃13;

＆＃13;

div {
  margin: 10px;
  height: 100px;
  width: 100px;
  position: relative;
}
div:before {
  content: "";
  position: absolute;
  top: 0;
  left: -10%;
  height: 100%;
  width: 100%;
  background: red;
  opacity: 0.5;
}
div:after {
  opacity: 0.5;
  content: "";
  position: absolute;
  top: 0;
  right: -10%;
  height: 100%;
  width: 100%;
  background: green;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;