CSS z-index ne fonctionne pas (position absolue)

Je suis en train de faire le noir div (relative) au-dessus de la deuxième carton jaune (absolue). Le noir div parent a une position absolue trop.

Code:

CSS:

#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;
}

HTML:

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

Résultat Attendu:

CSS z-index ne fonctionne pas (position absolue)

InformationsquelleAutor HTMHell | 2014-01-07

37

Supprimer
```
z-index:0;
```
de .absolute.

mise à Jour de violon ici.
- Merci, ça marche!!!. Apprécions l'aide
- bienvenue 🙂
- OK, mais POURQUOI ce travail???
InformationsquelleAutor Hiral
29

C'est à cause de la L'Empilement De Contexte, la fixation d'un z-index de le faire appliquer à tous les enfants ainsi.

Vous pourriez faire les deux <div>s frères et sœurs, au lieu de les descendants.
```
<div class="absolute"></div>
<div id="relative"></div>
```
http://jsfiddle.net/P7c9q/3/

InformationsquelleAutor xec

J'ai été aux prises avec ce problème, et j'ai appris (grâce à cette post) que:

opacité peut également affecter le z-index

CSS:

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;
}

HTML:

<div>
  <span class="red">Red</span>
</div>
<div>
  <span class="green">Green</span>
</div>
<div>
  <span class="blue">Blue</span>
</div>

Ici sur Mozzila développeurs page vous pouvez trouver plus de détails sur l'empilement.
Vos réponses m'ont beaucoup aidé. Merci!
Heureux, il a aidé.

InformationsquelleAutor Mohamed Ramrami

2

J'avais du mal à comprendre comment mettre une div sur une image comme ceci:

N'importe comment j'ai configuré les z-index dans les deux divs (l'image wrapper) et de la section I a été d'obtenir ceci:

S'avère que je n'avais pas mis en place le fond de la section à background: white;

donc, fondamentalement, 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 */
}
```
InformationsquelleAutor juliangonzalez
1

Il suffit d'ajouter le deuxième .absolue div avant les autres .deuxième div:
```
<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>
```
Parce que les deux éléments ont un indice de 0.

InformationsquelleAutor edonbajrami

essayez ce code:

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

}

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

InformationsquelleAutor Manoj

0

JSFiddle

Vous devez mettre le deuxième div sur le dessus de la première, parce que les deux ont un z-index de zéro, de sorte que l'ordre dans les dom décidera de ce qui est sur le dessus. Cela affecte aussi la relative positionné div parce que son z-index concerne les éléments à l'intérieur de la div parent.
```
<div class="absolute" style="top: 54px"></div>
<div class="absolute">
    <div id="relative"></div>
</div>
```
Css reste le même.

InformationsquelleAutor Markus Kottländer

Comment à ce sujet?

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;
}

utiliser le relatif div comme wrapper et de laisser le jaune div est normal de positionnement.

Uniquement le bloc noir besoin d'avoir une position absolue alors.

InformationsquelleAutor Rasmus Stougaard

0

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

Et puis plus tard les divs ne fonctionne pas sauf si j'ai eu z-index 200+. Même si j'avais position:relative sur chaque élément, avec le corps, à défaut z-index ça ne marcherait pas.

Espère que cela aide quelqu'un.

InformationsquelleAutor ax.falcon

Vous devez vous connecter pour publier un commentaire.