html - posicionar - Colocando el elemento posicionado por detrás absoluto

posicionar imagen css

Question

Tengo dos elementos en el mismo contenedor, el primero tiene position: absolute , la segunda position: relative . ¿Hay una manera de establecer el "índice z" de un elemento absoluto para que esté en segundo plano? El elemento posicionado relativo 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 ninguna influencia con la propiedad de z-index z. ¿Que puedo hacer?

Answer 1

CSS tiene una propiedad de índice z, por lo que en su nav#mainNav > img selector simplemente configure z-index: -1; . Aquí hay un jsFiddle que funciona: http://jsfiddle.net/8eLJz/1/

Answer 2

No estoy seguro de cuál quieres al frente, pero solo necesitas 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;
}

Answer 3

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

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