Question

假设我有两个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的相对宽度？

Answer 1

将位置：相对添加到外部div。

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

Answer 2

是。将外部设置为position：relative。

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;
}

“position：absolute”div有没有办法保留相对宽度？

2 个答案: