javascript - 有没有办法获得位置 :absolute elements? 的继承宽度

Question

这里第二个 div 是绝对定位的。第一个 div 占外部 div 宽度的 60%，但第二个 div 占整个屏幕宽度的 60%。我知道通过为第一个 div 提供position:relative值可以解决问题。除了提供position:relative值之外，还有其他解决方法吗？

.outer {
  height: 100px;
  width: 100px;
}

.first {
  background: black;
  width: 60%;
  color: white;
}

.second {
  position: absolute;
  width: inherit;
  background: yellow;
  color: black;
}

<div class="outer">
  <div class="first">
    parent
    <div class="second">
      child
    </div>
  </div>
</div>

Answer 1

如果外部 div 将具有定义的宽度，您可以依靠 CSS 变量来定义百分比，并且继承将按预期工作:

.outer {
  height: 100px;
  --w:100px;
  width: var(--w);
}

.first {
  background: black;
  width: calc(0.6 * var(--w));
  color: white;
 
}

.second {
  position: absolute;
  width: inherit;
  background: yellow;
  color: black;
 
}

<div class="outer">
<div class="first">
  parent
  <div class="second">
    child
  </div>
</div>
</div>