web-dev-qa-db-ja.com

「position：absolute」divが相対的な幅を保持する方法はありますか？

次のように、2つの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の相対的な幅を維持する方法はありますか？

htmlcsspositionabsolute
34
Charles

外部divにposition：relativeを追加します。

update：position: absoluteは、（静的以外の）何らかの位置を持つ最初の親に相対的です。この場合、そのようなコンテナはなかったため、ページを使用します。

65
Bror

はい。 outerを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;
}
7
Eli Gassert