Div sur le dessus de la division en utilisant z-index

Question

je les divs suivantes dans mon HTML:

<div class="main"> 
<div class="bgimage"></div> 
<div class="content">Text</div> 

qui est directement à l'intérieur de mon corps.

Avec le CSS suivant:

body { 
    margin: 0; 
    padding: 20px 0; 
} 
.content { 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    opacity: 0.5; 
} 
.content { 
    position: relative; 
    z-index: 1; 
    border: #000 thin solid; 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #000; 
} 
.bgimage { 
    position: absolute; 
    z-index: -1; 
    width: 1024px; 
    height: 768px; 
    margin-left: auto; 
    margin-right: auto; 
    background-image: url(bg1.jpg); 
} 

Fondamentalement, j'ai une division qui avec un affichage d'une image d'arrière-plan, et je vais avoir une autre division en haut de cette transparence. Ce code fonctionne, mais mon problème est quand j'essaye de faire descendre le contenu du haut.

Lorsque j'ajoute margin-top: 100px, par exemple, réduit également l'image. Je pensais que ça ne le toucherait pas si ce n'est pas sur le même z-index? Pourquoi l'ajout d'une marge force-t-il également le div bgimage?

J'ai aussi essayé de faire de la div avec classe de contenu une position absolue et un zindex, mais cela ne sera pas centré. Comment devrais-je résoudre ceci?

Answer 1

z-index n'a aucun rapport avec le positionnement: il ne touche que l'ordre de rendu de vos éléments. Position: relative indique au navigateur de rendre l'élément à l'endroit qu'il devrait être, et le compenser par d'éventuels left, right, top ou bottom coordonnées. Par conséquent, les marges, les paddings, etc. l'affectent toujours.

Seules position: absolute garanties independance de position.

Answer 2

Le positionnement absolu CSS est toujours fait "relatif" à l'ancêtre le plus récent qui a une "position: relative", sinon il utilise la balise body par défaut. Si le CSS que vous avez inclus est tout ce qui affecte ces divs, alors votre div contenu .content sera positionné par rapport à la div. Main, mais votre. BgImage sera positionné en fonction de la balise.

Si vous voulez à la fois .content et .bgImage de se déplacer au même rythme, alors vous aurez besoin d'ajouter une « position: relative » à div.main.

Answer 3

votre CSS devrait être

.bgimage { position: relative; } 

.content { position: absolute; } 

de sorte que le .content sera positionné par rapport à la .bgimage votre CSS actuelle rend la position .bgimage par rapport au document.

voir ce link sur le positionnement CSS

Answer 4

Je ne vois pas besoin de « z-index » es ou « position: absolute » dans votre code du tout - sauf si vous avez d'autres complications que vous ne l'avez pas révélé à nous .

Pour centrer l'arrière-plan de la classe DIV = « principale »:

body{margin:0;padding:20px 0;} 
.main{background:transparent url(bg1.jpg) no-repeat center top;} 
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;} 

Le « top centre » place le centre-dessus de l'image d'arrière-plan sur le centre-dessus de l'élément auquel il est appliqué.Vous pouvez appliquer une

min-width:1024px;_width:1024px; 

au même élément - pour empêcher une fenêtre plus étroite de cacher les bords (cela va changer la façon dont l'élément est rendu si la « fenêtre » est plus étroite que les dimensions de l'arrière-plan).

La seule chose que votre code pré-modifié peut le faire que mon code modifié ne peut pas:

• Crop l'image de fond (si elle est pas nativement 1024px x 768px) en utilisant le css « largeur » et les propriétés « hauteur »
• Si la classe = élément « principal » a déjà une série d'images d'arrière-plan, la plupart des navigateurs ne prennent pas en charge le CSS3 nécessaire pour empiler plusieurs arrière-plans sur le même élément

Certains de ce qui était déclaré à propos de "z-indexation" et la propriété "position" ci-dessus était c Orrect mais omis de mentionner: vous avez pris votre classe = "contenu" élément de "le flux". Les éléments ancêtres ne se développent pas lorsque le contenu de l'élément class = "content" augmente. C'est une différence importante et fondamentale entre les éléments "z-index" et les éléments qui restent "dans le flux".

Autres notes secondaires:

• éléments avec le même z-index sont empilées selon leur ordre dans le code HTML (plus tard dans le code HTML signifie qu'ils sont tirés au-dessus de l'écran)
• « z- index "ing requires" position: (absolu | relatif) "," z-index: (valeur valide) "et IIRC" (haut | gauche | bas | droite): (valeur valide) "sortir l'élément" de le flux "