Colocar absoluto detrás del elemento posicionado relativo

2 minutos de lectura

avatar de usuario
Luca Nate Mahler

Tengo dos elementos en el mismo contenedor, el primero tiene position: absoluteel 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

avatar de usuario
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/

¿Ha sido útil esta solución?