web-dev-qa-db-fra.com

CSS z-index ne fonctionne pas (position absolue)

J'essaie de faire la div noire (relative) au-dessus de la deuxième jaune (absolue). Le parent de la div noire a aussi une position absolue.

Code:

#relative {
	position: relative;
	width: 40px;
	height: 100px;
	background: #000;
	z-index: 1;
	margin-top: 30px;
}
.absolute {
	position: absolute;
	top: 0; left: 0;
	width: 200px;
	height: 50px;
	background: yellow;
	z-index: 0;
}
<div class="absolute">
    <div id="relative"></div>
</div>
<div class="absolute" style="top: 54px"></div>

Résultat attendu:

 enter image description here

htmlcsscss-positionrelativeabsolute
47
HtmHell

Retirer

z-index:0;

à partir de .absolute.

Mise à jour du violon ici.

35
Hiral

En raison du contexte Stacking , la définition d’un index z l’appliquera également à tous les enfants.

Vous pouvez faire les deux frères <div>s au lieu de descendants.

<div class="absolute"></div>
<div id="relative"></div>

http://jsfiddle.net/P7c9q/3/

27
xec

Je me débattais avec ce problème et j’ai appris (grâce à this post) que:

opacity peut également affecter l'indice z

div:first-child {
  opacity: .99; 
}

.red, .green, .blue {
  position: absolute;
  width: 100px;
  color: white;
  line-height: 100px;
  text-align: center;
}

.red {
  z-index: 1;
  top: 20px;
  left: 20px;
  background: red;
}

.green {
  top: 60px;
  left: 60px;
  background: green;
}

.blue {
  top: 100px;
  left: 100px;
  background: blue;
}
<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

6
Mohamed Ramrami

J'avais du mal à comprendre comment mettre une div sur une image comme celle-ci:  z-index working

Peu importe la façon dont j'ai configuré z-index dans les deux divs (le wrapper de l'image) et dans la section que je recevais, voici ceci:

 z-index Not working

Il s'avère que je n'avais pas configuré l'arrière-plan de la section en tant que background: white;

donc en gros c'est comme ça:

<div class="img-wrp">
  <img src="myimage.svg"/>
</div>
<section>
 <other content>
</section>

section{
  position: relative;
  background: white; /* THIS IS THE IMPORTANT PART NOT TO FORGET */
}
.img-wrp{
  position: absolute;
  z-index: -1; /* also worked with 0 but just to be sure */
}
2
juliangonzalez

Il suffit d’ajouter la seconde div .absolute avant l’autre div .second:

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

Parce que les deux éléments ont un index 0.

1
edonbajrami

Que dis-tu de ça?

http://jsfiddle.net/P7c9q/4/

<div class="relative">
  <div class="yellow-div"></div>
  <div class="yellow-div"></div>
  <div class="absolute"></div>
</div>

.relative{
position:relative;
}

.absolute {
position:absolute;
width: 40px;
height: 100px;
background: #000;
z-index: 1;
top:30px;
left:0px;
}
.yellow-div {
position:relative;
width: 200px;
height: 50px;
background: yellow;
margin-bottom:4px;
z-index:0;
}

utilisez le div relatif comme wrapper et laissez les div jaunes se positionner normalement.

Seul le bloc noir doit alors avoir une position absolue.

0
Rasmus Stougaard

J'ai résolu mon problème z-index en créant le wrapper z-index:-1 et le corps z-index:-2, ainsi que les autres divs z-index:1. 

Et puis les dernières divisions ne fonctionnaient que si j'avais z-index 200+. Même si j'avais position:relative sur chaque élément, avec le corps par défaut z-index, cela ne fonctionnerait pas. 

J'espère que ça aide quelqu'un. 

0
ax.falcon

essayez ce code:

.absolute {
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 50px;
    background: yellow;

}

http://jsfiddle.net/manojmcet/ks7ds/

0
Manoj

JSFiddle

Vous devez mettre la deuxième division au-dessus de la première, car les deux ont un z-index égal à zéro, de sorte que l'ordre dans le dom décidera lequel est au-dessus. Cela affecte également le div positionné relatif car son z-index concerne des éléments à l'intérieur du div parent.

<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>

Css reste le même.

0
Markus Kottländer