web-dev-qa-db-fra.com

Placement absolu derrière l'élément positionné relatif

J'ai deux éléments dans le même conteneur, le premier a position: absolute, la deuxième position: relative. Existe-t-il un moyen de définir le "z-index" d'un élément absolu afin qu'il soit en arrière-plan? L'élément positionné relatif doit être sur le dessus (couche z) car il contient des liens ...

Voici un JSFiddle: http://jsfiddle.net/8eLJz/

L'élément positionné absolu est au sommet de la couche z et je n'ai aucune influence sur le z-index-propriété. Que puis-je faire?

htmlcss-positionz-index
31
Luca Nate Mahler

Je ne sais pas lequel vous voulez devant, mais il vous suffit de définir la position sur les deux et de définir l'index z sur les deux. http://jsfiddle.net/8eLJz/2/

a {
    color: black;
}

nav#mainNav {
    position: relative;
}

nav#mainNav > img {
    position: absolute;
    width: 100px;
    left: 0;
    z-index: 5;
}

nav#mainNav > a > img {
    width: 100%;
}

nav#mainNav > nav {
    width: 100%;
    position: relative;
    z-index: 10;
}

nav#mainNav > nav > a {
    display: block;
    text-align: right;
    background-color: yellow;
}
51
2pha

http://jsfiddle.net/8eLJz/3/

nav#mainNav > img {
    z-index: -1;
}
11
isherwood

CSS a une propriété z-index ainsi sur votre nav#mainNav > img le sélecteur vient d'être réglé z-index: -1;. Voici un jsFiddle fonctionnel: http://jsfiddle.net/8eLJz/1/

1
HJ05