J'ai essayé d'appliquer z-index: -1 mais rien ne semble fonctionner:Comment puis-je faire passer ma division "Dunedin" à l'avant?
HTML:
<div id="dunedin">
Dunedin
</div>
CSS:
#dunedin {
font-size: 200px; text-align: center;
position: relative;
z-index: -1;
}
donnent une valeur positive pour z-index, par exemple :
#dunedin {font-size: 200px; text-align: center; position: relative; z-index: 100; }
z-index fonctionne comme des calques, plus le nombre que vous mettez est élevé, plus cet objet sera affiché.
Comme vous pouvez le voir dans cet exemple, même le rouge est normalement recouvert de vert en raison du flux et de la taille du document. Une fois que nous avons mis la valeur z-index plus haut, le rouge apparaîtra en haut de la div verte.
.a {
position:absolute;
width:300px;
height:200px;
background:red;
z-index:1;
}
.b {
position:absolute;
width:400px;
height:300px;
background:green;
z-index:0;
}<div class="a"></div>
<div class="b"></div>Je pensais avoir essayé ce haha thankyou monsieur – user7651290
heureux d'aider mon ami! – andrepaulo
#dunedin1{
width:200px;
height:200px;
float:left;
background-color:red;
text-align:center;
z-index:-2;
position:relative;
}
#dunedin2{
width:200px;
height:200px;
float:left;
background-color:green;
text-align:center;
z-index:0;
position:relative;
}
#dunedin3{
width:100%;
height:50px;
position:absolute;
top:60px;
left:60px;
background-color:blue;
text-align:center;
z-index:-1;
}<div id="dunedin1">
Dunedin
</div>
<div id="dunedin2">
Dunedin
</div>
<div id="dunedin3">
Dunedin
</div>
par rapport à quoi? – andrepaulo
http://stackoverflow.com/help/on-topic * Les questions qui demandent une aide au débogage ("pourquoi ce code ne fonctionne-t-il pas?") Doivent inclure le comportement souhaité, un problème ou une erreur spécifique et le code le plus court nécessaire pour le reproduire dans la question elle-même. Les questions sans énoncé de problème clair ne sont pas utiles aux autres lecteurs. Voir: Comment créer un [exemple minimal, complet et vérifiable] (http://stackoverflow.com/help/mcve). * –