web-dev-qa-db-fra.com

comment utiliser z-index avec un positionnement relatif?

J'ai un problème avec z-index et mon code. Je veux avoir un popup sur chaque ligne, positionné par rapport à cette ligne. J'ai donc créé ce code:

<div class="level1">
    <div class="level2">
        <input type="text" value="test1" />
        <div class="popup">test1</div>
    </div>
    <div class="level2">
        <input type="text" value="test2" />
        <div class="popup">test2</div>
    </div>
</div>

avec le style suivant

.level1
{
    position:relative;
    z-index:2;
}
.level2
{
    position:relative;   
    z-index:3;
}
.popup
{
    position:absolute;
    left:0px;
    top:10px;
    width:100px;
    height:100px;
    background:yellow;
    z-index:4;
}
htmlcsscss-positionz-index
38
Chris Vaarhorst

Lorsque vous définissez position: relative sur un élément puis vous établissez un nouveau bloc conteneur. Tout positionnement à l'intérieur de ce bloc le concerne.

La définition de z-index sur un élément à l'intérieur de ce bloc ne modifiera sa couche que par rapport aux autres éléments à l'intérieur du même bloc.

Je ne suis au courant d'aucune solution.

60
Quentin

Vous pouvez utiliser z-index avec la position relative. Il vous suffit de spécifier position: relative. Si vous voulez vraiment qu'il ressemble à ce qu'il apparaît, je suggère d'utiliser box-shadow

.popup {
    position:relative;
    left: 0px;
    top: 10px;
    width: 100px;
    height: 100px;
    background:yellow;
    z-index: 4;

    -webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    -o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
    box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
}
3
jagannathbhat

essayez d'ajouter z-index avec des valeurs négatives aux divs arrière

1
user1386213

Le Z-Index est un ordre de règles dont les résultats seront visibles UNIQUEMENT lorsque deux éléments ou plus se chevauchent. Cela signifie que si vous souhaitez avoir le même comportement d'index z qu'en position absolue, vous devrez les faire se chevaucher. La position relative ne les fait pas se chevaucher, donc par exemple dans cet exemple, pour que ces deux divs se chevauchent, je dois régler le haut de la seconde sur -50px.

  <div style="background-color: blue; width: 500px; height: 100px; position: relative">
    <div style="background-color: red; width: 50px; height: 50px; position: relative; z-index: 1;  top: 0px"></div>
    <div style="background-color: yellow; width: 50px; height: 50px; position: relative; z-index: 0; top: -50px"></div>  
  </div>
0
R01010010