Faire absolue positionné div développez div parent hauteur

Bien que l'étirement des éléments avec position: absolute n'est pas possible, il y a souvent des solutions vous permettant d'éviter le positionnement absolu, tout en obtenant le même effet. Regardez ce violon qui résout le problème dans votre cas particulier, http://jsfiddle.net/gS9q7/

Le truc, c'est à l'inverse de l'élément de commande flottant à la fois des éléments, la première à droite, deuxième à gauche, de sorte que la seconde apparaît en premier.

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

Enfin, ajouter une clearfix pour le parent et vous avez terminé (voir la violon pour l'ensemble de la solution).

Généralement, tant que l'élément à la position absolue est placée au dessus de l'élément parent, les chances sont bonnes que vous trouver une solution de contournement par l'élément flottant.

Il y a un moyen simple de résoudre ce problème.

Vous avez juste à copier le contenu de l'enfant1 et enfant2 relative des divs avec display:none dans le div parent. Dire child1_1 et child2_2. Mettre child2_2 sur le dessus et child1_1 au fond.

Lorsque votre jquery (ou autre) appelle l'absolu div, il suffit de régler la fonction relative div (child1_1 ou child2_2) avec display:block ET visibility:hidden. Le parent de l'enfant sera toujours invisible, mais faire de la mère div supérieur.

Il y a une très simple hack qui résout ce problème

Voici un codesandbox qui illustre la solution: https://codesandbox.io/s/00w06z1n5l

HTML

<div id="parent">
  <div class="hack">
   <div class="child">
   </div>
  </div>
</div>

CSS

.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }

vous pouvez jouer avec le positionnement du bloc div affecter où l'enfant se positionne.

Voici un extrait:

CSS:

html {
  font-family: sans-serif;
  text-align: center;
}

.container {
  border: 2px solid gray;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.stuff-the-middle {
  background: papayawhip
    url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
  flex: 1;
}

.parent {
  background: palevioletred;
  position: relative;
}

.hack {
  position: absolute;
  left: 0;
  top:0;
  right: 0;
}
.child {
  height: 40px;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

HTML:

    <div class="container">
      <div class="stuff-the-middle">
        I have stuff annoyingly in th emiddle
      </div>
      <div class="parent">
        <div class="hack">
          <div class="child">
            I'm inside of my parent but absolutely on top
          </div>
        </div>
        I'm the parent
        <br /> You can modify my height
        <br /> and my child is always on top
        <br /> absolutely on top
        <br /> try removing this text
      </div>
    </div>

Je suis venu avec une autre solution, je n'ai pas l'amour, mais fait le travail.

Fondamentalement dupliquer les éléments enfants de telle manière que les doublons ne sont pas visibles.

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

.width-calc {
    height: 0;
    overflow: hidden;
}

Si ces éléments enfants contiennent peu de balisage, alors l'impact sera faible.

Il y a une meilleure façon de le faire maintenant. Vous pouvez utiliser le bas de la propriété.

    .my-element {
      position: absolute;
      bottom: 30px;
    }

Également envisager l'approche suivante:

CSS:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

Aussi depuis que vous essayez de repositionner les divs envisager de grille css

Essayez cela, il a travaillé pour moi

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

Il va mettre l'enfant la hauteur de parent hauteur