web-dev-qa-db-fra.com

Existe-t-il un moyen pour que "position: absolu" div conserve sa largeur relative?

Disons que j'ai deux divs, l'un dans l'autre, comme ceci:

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

À l'heure actuelle, le div intérieur a une largeur de 100% de 50% de la taille de l'écran, ou 50% de la taille de l'écran. Si je devais changer le div intérieur en position absolue, comme ceci:

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

Dans ce cas, le div intérieur occupe 100% de l'espace d'écran, car sa position est définie sur absolu.

Ma question est la suivante: existe-t-il un moyen de maintenir la largeur relative de la division intérieure pendant que sa position est définie sur absolue?

htmlcsspositionabsolute
34
Charles

Ajoutez position: relative à votre div externe.

mise à jour : Cela fonctionne car les positions dans position: absolute sont relatifs au premier parent qui a un positionnement (autre que statique). Dans ce cas, il n'y avait pas de conteneur de ce type, il utilise donc la page.

65
Bror

Oui. Réglez la position extérieure sur: 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