webentwicklung-frage-antwort-db.com.de

Gibt es eine Möglichkeit für "position: absolute" div, die relative Breite beizubehalten?

Nehmen wir an, ich habe zwei Divs ineinander:

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

Im Moment hat das innere Div eine Breite von 100% von 50% der Bildschirmgröße oder 50% der Bildschirmgröße. Wenn ich das innere Div in Position Absolut ändern würde, so:

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

In diesem Fall nimmt das innere Div 100% des Bildschirmbereichs ein, da seine Position auf absolut gesetzt ist.

Meine Frage lautet: Gibt es eine Möglichkeit, die relative Breite des inneren Div beizubehalten, während seine Position auf absolut festgelegt ist?

34
Charles

Addiere Position: relativ zu deinem äußeren Div.

update : Es funktioniert, weil Positionen in position: absolute sind relativ zum ersten übergeordneten Element, das eine Position aufweist (außer statisch). In diesem Fall gab es keinen solchen Container, daher wird die Seite verwendet.

65
Bror

Ja. Äußere auf Position setzen: relativ.

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