css - top - Cómo hacer que un elemento principal aparezca sobre el niño

z-index position relative

Question

Tengo dos elementos CSS anidados. Necesito que el padre esté en la parte superior, es decir, arriba en el eje z, del elemento hijo. Solo establecer z-index no es suficiente.

No puedo establecer un índice z negativo en el elemento secundario, que lo configurará debajo del contenedor de la página en mi página real. ¿Es este el único método?

http://jsbin.com/ovafo/edit

.parent {
  position:  relative;
  width: 750px;
  height: 7150px;
  background: red;
  border: solid 1px #000;
  z-index: 1;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: 0;
  color: white;
  top: 0;
}
.wrapper
{
  position: relative;
  background: green;
  z-index: 10;
}

<div class="wrapper">
  <div class="parent">
    parent parent
    <div class="child">
      child child child
    </div>
  </div>
</div>

Answer 1

Afortunadamente, existe una solución. Debe agregar un contenedor para primario y cambiar el índice z de este contenedor por ejemplo 10, y establecer z-index para el hijo en -1:

.parent {
    position: relative;
    width: 750px;
    height: 7150px;
    background: red;
    border: solid 1px #000;
    z-index: initial;
}

.child {
    position: relative;
    background-color: blue;
    z-index: -1;
    color: white;
}

.wrapper {
    position: relative;
    background: green;
    z-index: 10;
}

<div class="wrapper">
    <div class="parent">parent parent
        <div class="child">child child child</div>
    </div>
</div>

Answer 2

Algunas de estas respuestas funcionan, pero establecen la position: absolute; y z-index: 10; parecía bastante fuerte solo para lograr el efecto requerido. Descubrí que lo siguiente era todo lo que se necesitaba, aunque desafortunadamente no pude reducirlo más.

HTML:

<div class="wrapper">
    <div class="parent">
        <div class="child">
            ...
        </div>
    </div>
</div>

CSS:

.wrapper {
    position: relative;
    z-index: 0;
}

.child {
    position: relative;
    z-index: -1;
}

Utilicé esta técnica para lograr un efecto de desplazamiento con borde para enlaces de imágenes. Aquí hay un poco más de código, pero usa el concepto anterior para mostrar el borde sobre la parte superior de la imagen.

http://jsfiddle.net/g7nP5/

Answer 3

Como tus divs son position:absolute , en realidad no están anidados en lo que a posición se refiere. En su página jsbin cambié el orden de los divs en el HTML a:

<div class="child"><div class="parent"></div></div>

y el cuadro rojo cubría el cuadro azul, que creo que es lo que estás buscando.

Answer 4

Debería usar position:relative o position:absolute tanto en el padre como en el hijo para usar z-index .

Answer 5

Establezca un z-index negativo para el elemento secundario y elimine el conjunto uno en el elemento primario.

.parent {
    position: relative;
    width: 350px;
    height: 150px;
    background: red;
    border: solid 1px #000;
}
.parent2 {
    position: relative;
    width: 350px;
    height: 40px;
    background: red;
    border: solid 1px #000;
}
.child {
    position: relative;
    background-color: blue;
    height: 200px;
}
.wrapper {
    position: relative;
    background: green;
    height: 350px;
}

<div class="wrapper">
    <div class="parent">parent 1 parent 1
        <div class="child">child child child</div>
    </div>
    <div class="parent2">parent 2 parent 2
    </div>
</div>

https://jsfiddle.net/uov5h84f/

Answer 6

Lo rompió. Básicamente, lo que sucede es que cuando establece el índice z en negativo, en realidad ignora el elemento padre, esté posicionado o no, y se ubica detrás del siguiente elemento posicionado, que en su caso era su contenedor principal. Por lo tanto, debe colocar su elemento padre en otro div posicionado, y su div hijo se sentará detrás de eso.

Trabajar en eso fue un salvavidas para mí, ya que mi elemento padre específicamente no podía ser posicionado, para que mi código funcione.

Encontré todo esto increíblemente útil para lograr el efecto que se indica aquí: Usar solo CSS, mostrar div en el control deslizante sobre <a>

Answer 7

estilo:

.parent{
  overflow:hidden;
  width:100px;
}

.child{
  width:200px;
}

cuerpo:

<div class="parent">
   <div class="child"></div>
</div>