为什么绝对定位的DIV不会继承父元素的宽度？

Question

5

为什么绝对定位的 DIV 不会继承其父元素的宽度？这个 div 元素具有自己独立的尺寸和位置，不会受到父元素的影响。

div {
  position: absolute;
  top:100px;
}

<html>
<body>
  <div>This DIV</div>
</body>
</html>

在静态定位中，DIV会占用所有可用的空间，在绝对定位中，DIV的宽度取决于其内容的长度。

- MezzanineLearner

https://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Specifying_dimensions - DaniP

Danip，我看了链接，我的 div 祖先是 html，它是全屏的，所以为什么在我的 div css 中使用 width:inherit 不起作用？请解释一下。 - MezzanineLearner

3个回答

4

的默认宽度是自适应的。它自动根据内容确定宽度。它不会从父容器继承宽度。如果需要这样做，您需要在

的宽度属性上指定inherit。

div {
    position: absolute;
    top:100px;
    width: inherit;
}

- Jeff Wolff

1

没有起作用，div宽度仍然是内容的宽度。 - MezzanineLearner

你需要设置 body 的宽度，它将会继承... 或者将 div 包裹在另一个 div 中并设置其宽度。body 的默认宽度也是自动的。 - Jeff Wolff

我正在使用HTML作为父元素，它是全宽的。目前，body的宽度也是100%。 - MezzanineLearner

body是父级元素，因为它在div之前。 - Jeff Wolff

3

阅读 @DaniP 的文档链接获取答案。

为继承其父元素的宽度添加样式 width : inherit

#divParent{
  width:300px;
}


#divAbsolute {
  position: absolute;
  top:100px;
  background:red;
  width:inherit;
}

<html>
<body>
  <div id="divParent">
    <div id="divAbsolute">This DIV</div>
  </div>  
</body>
</html>

- Jacopo Brovida

这个并没有继承父元素的属性，你假设了父元素的宽度为100%。 - MezzanineLearner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mattstache · Accepted Answer

由于绝对定位的元素不像块级元素那样表现，并且不像普通的 div 元素一样依次排列，因此它们不会流动。绝对定位是否影响宽度？