Comment mettre une division statique sur une division de position absolue ?

Question

Je suis en train de construire une petite application web. J'ai deux divs. L'un est absolu et l'autre est statique. J'essaie de positionner mon div statique au-dessus de mon absolu, de sorte qu'il reste l'élément le plus important.

Exemple de code très simple :

http://jsbin.com/efuxe3/edit

Comment cela peut-il être fait ?

Modifier : J'ai utilisé l'index z. Il semble n'avoir aucun effet.

Answer 1

Plutôt que de placer l'élément positionné de manière statique sur l'élément positionné de manière absolue, vous pouvez placer l'élément positionné de manière absolue derrière l'élément positionné de manière statique. Vous pouvez le faire en définissant le z-index de l'élément positionné de manière absolue à une valeur négative. Cependant, comme @Town l'a mentionné, cela placera également l'élément absolument positionné derrière tout le reste dans le flux normal.

Answer 2

Vous pouvez appliquer un index z négatif aux autres éléments en les plaçant derrière la division statique. Cela peut être appliqué directement aux autres éléments ou vous pouvez utiliser

*:not(connectedObjects){
    z-index:-1000000000000000000000000000;
  }

Mais cela ne fonctionne pas dans Internet Explorer

Answer 3

Vous pourriez avoir un second div positionné de manière absolue pour contenir vos éléments positionnés de manière statique :

<div id="container">
   <div class="underlay">
      I want this to appear under my static items.
   </div>

   <div class="item_container">
       <div class="item">blah</div>
       <div class="item">yada</div>
       <div class="item">foo</div>
       <div class="item">bar</div>
   </div>
</div>           

Et votre css est

.underlay {
   position: absolute;
   z-index: 0;
}

.item_container {
   position:absolute;
   z-index:10;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

.item {
   position: static;
}

Answer 4

si par le haut vous voulez dire z-Index, vous pouvez définir le style de cette div avec un z-index plus élevé

div.divClassName {
   z-Index:100;
}

modifier :

vous pouvez changer l'indice z de votre div, avec un positionnement absolu à un négatif, mais alors vous devrez le faire pour chaque autre élément.

Sauf si vous avez vraiment une bonne raison d'utiliser le positionnement à static, vous pouvez le changer à relatif, et l'index z aura un effet.io l'ont essayé dans votre exemple de code et il fonctionne bien ;