如何继承孩子的孩子的宽度

Question

我有3个标签：第一个主要的div，第二个是figure，里面有一个figcaption，像这样：

<div class="main-div">
  <figure>
    <figcation>
    </figcaption>
  </figure>
</div>

我将主要的div 分配为整个文档宽度的80%。然后我将figure 设置为其父级的100%，因此它完全环绕主要div。

在那之后，我给figcation 分配了absolute 的位置，并且我希望它具有100% 的主要宽度div，就像figure 一样，因为它的宽度只是作为里面的内容运行结束。

那么如何将figcaption 的宽度指定为主div 的全宽？

我尝试过继承，但它不起作用。此外，我无法在figure 之外获取figcaption 标签，因为从语义上讲，这是错误的。

Answer 1

我认为您在figcaption 的父元素div 或figure 之一上缺少position: relative：

figure {
    position: relative;
}

figcaption {
    position: absolute;
}

如果您使用position: absolute;，则top|right|bottom|left 值以及width 和height 值（如百分比）是相对于没有位置static 的最近父级计算的。所以它是相对于位置最近的元素relative|absolute|fixed 或最后是html-元素。

演示

Try before buy

Answer 2

给出人物位置：相对的。

绝对定位需要容器被“定位”。