51

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

4

3 に答える 3

92

position:relativeを外側の div に追加します。

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

于 2013-01-14T21:36:06.737 に答える
9

はい。外側を 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;
}
于 2013-01-14T21:36:48.550 に答える