51

假设我有两个 div，一个在另一个里面，就像这样：

<html>
  <body>
    <div id="outer" style="width:50%">
      <div id="inner" style="width:100%">
      </div>
    </div>
  </body>
</html>

现在，内部 div 的宽度是屏幕大小的 50% 的 100%，或屏幕大小的 50%。如果我要将内部 div 更改为绝对位置，如下所示：

<html>
  <body>
    <div id="outer" style="width:50%">
      <div id="inner" style="position:absolute;width:100%">
      </div>
    </div>
  </body>
</html>

在这种情况下，内部 div 占据了 100% 的屏幕空间，因为它的位置设置为绝对。

我的问题是：有没有办法在内部 div 的位置设置为绝对时保持内部 div 的相对宽度？

4

3 回答 3

92

添加位置：相对于您的外部 div。

update：它之所以有效，是因为位置position: absolute是相对于具有某些定位（静态除外）的第一个父级的。在这种情况下，没有这样的容器，所以它使用页面。

于 2013-01-14T21:36:06.737 回答
9

是的。将外部设置为位置：相对。

http://jsfiddle.net/57673/

.outer
{
  width: 50%;
  height: 200px;
  position: relative;
  border: 1px solid red;
}

.inner
{
  width: 100%;
  position: absolute;
  height: 100%;
  border: 1px solid blue;
}
于 2013-01-14T21:36:48.550 回答
1

我有一个必须position:absolute在项目中的元素，我发现该设置width为max-content我解决了这个问题。
它似乎在现代浏览器中得到了很好的支持。查看此链接了解更多信息：Mozilla.org (max-content)。

于 2021-10-16T12:18:46.733 回答