Est-il possible de “position:absolute” div pour conserver la largeur relative?

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

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

Dès maintenant, à l'intérieur de la div a une largeur de 100% à 50% de la taille de l'écran, ou 50% de la taille de l'écran. Si je devais changer l'intérieur div en position absolute, 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, l'intérieur de la div prend 100% de l'espace de l'écran, car sa position est absolu.

Ma question est la suivante: Est-il possible de maintenir la largeur relative de l'intérieur de la div, alors que sa position est définie à l'absolu?

InformationsquelleAutor Charles | 2013-01-14
  1. 64

    Ajouter position:relative à votre extérieur div.

    mise à jour: Il fonctionne parce que les positions dans position: absolute le sont par rapport au premier parent qui a certains de positionnement (autre que statique). Dans ce cas, il n'y a rien de tel conteneur, de sorte qu'il utilise la page.

    • Merci pour l'aide! Cela a été ennuyeux moi pendant environ une heure. Je suis content que la solution est si simple 🙂
    • OHHH AHHH!!! J'ai passé les 5 dernières heures à essayer de résoudre ce fichu site j'ai travaillé. Je vous remercie beaucoup pour cela. Pouvez-vous expliquer pourquoi cela fonctionne?
    • ok, c'est la pêche à la traîne, mais pour une fois css a une solution simple à un problème simple! Merci!!!!
    • Génial fonctionne pour moi !
    • YESSSSSSS! Vous rock!
    • beaucoup de gens va vous aime pour cette réponse 🙂
    • économiser des heures de travail
    • Si votre div extérieure est un <svg> et vous souhaitez le calque de texte sur le dessus de cela, vous aurez besoin de mettre une autre extérieure <div> comme cela et utiliser z-indexation de la place avec à la fois absolue: <div style="{position: relative}"> <svg style="{position: absolute; z-index: 0}" /> <div style="{position: absolute; z-index: 100}">This is my Svg label!</div> </div> j'ai eu ce problème, et cette solution a fonctionné pour moi! Malheureusement, <svg>'s ne peut pas vraiment avoir d'enfants.

    InformationsquelleAutor Bror
  2. 7

    Oui. Ensemble extérieur de 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;
}
    • Merci, même réponse que Bror! L'ai eu à travailler tout de suite 🙂
    InformationsquelleAutor Eli Gassert