Div sur le dessus de la Div à l'aide de z-index

J'ai le texte suivant divs dans mon code HTML:

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

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

Avec le code 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);
}

En gros, j'ai un Div avec un affichage d'une image d'arrière-plan, et j'aurai une autre Div en haut de cette avec de la transparence. Ce code actuel fonctionne, mais mon problème est que lorsque je suis en train de prendre le div du contenu de haut en bas.

Quand j'ajoute margin-top:100px, par exemple, est aussi à l'image vers le bas. J'ai pensé qu'il ne serait pas la toucher si elle n'est pas sur le même z-index? Pourquoi ne l'ajout d'une marge aussi la force de la bgimage div bas?

J'ai aussi essayé de faire la div avec la classe de contenu une position absolue et un zindex, mais alors ce ne sera pas le centre. Comment dois-je résoudre ce problème?

Est-il possible de définir .bgimage de position au top:0? et aussi, pourquoi ne pas l'emballage contenu dans bgimage?
Le paramètre haut:20 met-il à ce que je recherche! Mais je pensais que je n'aurais pas besoin de cela depuis que j'ai un rembourrage pour le corps dont je pensais qu'ils auraient à prendre soin de cela? Je vais modifier ça dans le CSS.

OriginalL'auteur Iacks | 2010-03-27

  1. 10

    votre CSS devrait être

    .bgimage { position: relative; }

.content { position: absolute; }

    donc le .le contenu sera positionné par rapport à l' .bgimage
    votre CSS rend le .bgimage position par rapport au document.

    voir ce lien sur le positionnement CSS

    OriginalL'auteur pixeltocode

  2. 3

    z-index n'a aucun rapport avec le positionnement: il n'affecte que l'ordre de rendu de vos éléments. Position: relative indique au navigateur pour rendre l'élément à l'endroit où il doit être, et de la compenser par d'éventuelles left, right, top ou bottom coordonnées. Par conséquent, des marges, des remplissages, etc. encore l'affecter.

    Seulement position: absolute garantit la position de l'indépendance.

    "z-index n'a aucun rapport avec le positionnement: il n'affecte que l'ordre de rendu de vos éléments" Clair et précis!

    OriginalL'auteur zneak

  3. 2

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

    Au centre de l'arrière-plan sur l'DIV class="main":

    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 centre "top" des lieux haut au centre de l'image de fond sur le haut au centre de l'élément appliqué. Vous pouvez appliquer une

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

    le même élément, pour empêcher une étroite fenêtre de cacher les bords (ce qui va changer la façon dont l'élément est affiché si la "fenêtre" est plus étroite que le fond de dimensions).

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

    • De recadrer l'image d'arrière-plan (si il n'est pas nativement 1024px x 768px) à l'aide de la css "largeur" et "hauteur" propriétés
    • Si l'class="principal" de l'élément a déjà une image d'arrière-plan définie, la plupart des navigateurs qui ne supportent pas le CSS3 nécessaire d'empiler des arrière-plans multiples sur le même élément

    Certains de ce qui a été dit au sujet de "z-indexation" et la "position" de la propriété ci-dessus est correcte, mais a omis de mentionner:
    vous avez pris votre class="contenu" de l'élément "hors de la circulation". L'ancêtre des éléments n'augmente pas lorsque le contenu de class="contenu" élément se développe. C'est une grande et différence fondamentale entre "z-index"ed éléments et les éléments qui restent "dans le flux".

    Autre côté notes:

    • éléments avec le même z-index sont empilés selon leur ordre dans le code HTML (plus tard dans le code HTML de moyens, ils sont dessinés en haut de l'écran)
    • "z-index"ing exige "position: (absolu|relatif)", "z-index: (valeur valide)", et autant que je me souvienne "(haut|gauche|bas|droite): (valeur valide)" à l'élément "hors de la circulation"

    OriginalL'auteur David

  4. 1

    CSS de positionnement absolu est toujours fait "relative" à la plus récente ancêtre qui a une "position: relative", sinon, il utilise le corps de la balise par défaut. Si le CSS que vous avez est inclus, tout ce qui touche les divs, alors votre .contenu de la div sera positionné par rapport à l' .div principale, mais votre .bgImage sera positionné en fonction de la balise.

    Si vous souhaitez à la fois .le contenu et les .bgImage à se déplacer au même rythme, alors vous aurez besoin d'ajouter un "position: relative" à la div.principal.

    OriginalL'auteur Marc B