Luca Nate Mahler
Tengo dos elementos en el mismo contenedor, el primero tiene position: absolute
el segundo position: relative
. ¿Hay alguna manera de establecer el “índice z” de un elemento absoluto para que esté en segundo plano? El elemento de posición relativa debe estar en la parte superior (capa z) porque contiene enlaces…
Aquí hay un JSFiddle: http://jsfiddle.net/8eLJz/
El elemento posicionado absoluto está en la parte superior de la capa z y no tengo influencia con el z-index
-propiedad. ¿Que puedo hacer?
No estoy seguro de cuál quiere al frente, pero solo necesita establecer la posición en ambos y establecer el índice z en ambos.
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;
}
-
¡Lo ha hecho! Genial, funcionó para mí!
– FullStackChris
27 de enero a las 7:48
isherwood
Puede poner un índice z negativo en la imagen, lo que hará que se superponga detrás de los otros elementos:
a {
color: black;
}
nav#mainNav {
position: relative;
}
nav#mainNav>img {
position: absolute;
width: 100px;
left: 0;
z-index: -1; /* <----------------------------------- HERE I AM! */
}
nav#mainNav>a>img {
width: 100%;
}
nav#mainNav>nav {
width: 100%;
}
nav#mainNav>nav>a {
display: block;
text-align: right;
background-color: yellow;
}
<nav id="mainNav">
<img src="http://www.colourbox.com/preview/7389458-682747-example-stamp.jpg" />
<nav> <a href="https://stackoverflow.com/">Some Text</a>
<a href="https://stackoverflow.com/">Some Text</a>
</nav>
</nav>
CSS tiene una propiedad de índice z, por lo que en su nav#mainNav > img
selector recién configurado z-index: -1;
. Aquí hay un jsFiddle que funciona: http://jsfiddle.net/8eLJz/1/