Colocar el elemento absoluto detrás de la posición relativa

Question

Colocar el elemento absoluto detrás de la posición relativa

Tengo dos elementos en el mismo contenedor, el primero tiene position: absolute, el segundo position: relative. ¿Hay una manera de establecer el "z-index" 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 influencia con la propiedad z-index -. ¿Qué puedo hacer?

25

html z-index relative absolute

Author: Luca Nate Mahler, 2014-03-03

Source

3 answers

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

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

6

Author: isherwood,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-03 16:02:23

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

1

Author: HJ05,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-03 16:02:40

score 42 · Accepted Answer

No estoy seguro de cuál quieres delante, pero solo necesitas establecer la posición en ambos y establecer z-index 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;
}