Traiga el elemento al frente usando CSS

87

No puedo entender cómo traer imágenes al frente usando CSS. Ya intenté configurar el índice z en 1000 y la posición en relativa, pero aún falla.

Aquí hay un ejemplo:

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}
<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>
Expandir fragmento

html css z-index jsfiddle Stylock
fuente
¿Traer qué al frente? Además, el <col> está en desuso .
Vucko
Traiga las imágenes al frente.
Stylock
¿Por qué utiliza tablas anidadas para hacer un menú?
Blender
2
Tuve problemas con el menú en IE8 y las tablas anidadas lo solucionaron.
Stylock
Este video es extremadamente útil para comprender cómo funciona.
J0ANMM

Respuestas:

135

Agregar z-index:-1y position:relativeal contenido

#header {
    background: url(http://placehold.it/420x160) center top no-repeat;
}
#header-inner {
    background: url(http://placekitten.com/150/200) right top no-repeat;
}
.logo-class {
    height: 128px;
}
.content {
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    border-collapse: collapse;
    z-index: -1;
    position:relative;
}
.td-main {
    text-align: center;
    padding: 80px 10px 80px 10px;
    border: 1px solid #A02422;
    background: #ABABAB;
}
<body>
    <div id="header">
        <div id="header-inner">
            <table class="content">
                <col width="400px" />
                <tr>
                    <td>
                        <table class="content">
                            <col width="400px" />
                            <tr>
                                <td>
                                    <div class="logo-class"></div>
                                </td>
                            </tr>
                            <tr>
                                <td id="menu"></td>
                            </tr>
                        </table>
                        <table class="content">
                            <col width="120px" />
                            <col width="160px" />
                            <col width="120px" />
                            <tr>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                                <td class="td-main">text</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <!-- header-inner -->
    </div>
    <!-- header -->
</body>
Expandir fragmento

Sowmya
fuente
2
Tu solución funcionó a la perfección. ¿Puede explicar por qué funciona esto?
Germstorm
1
@Germstorm Z-indexcontrola cómo las imágenes o divs se apilan unas sobre otras. Div / imagen con un valor de índice Z más alto ocupa el primer lugar y el más bajo se quedaría atrás.
Sowmya
Realmente no recuerdo claramente las circunstancias de mi pregunta, pero mi problema era que entendía lo que z-indexsí, pero aún así no funcionó. Lo que he aprendido de esta respuesta es que z-indextambién debe tener en cuenta la jerarquía de los padres.
Germstorm
2
@Germstorm La respuesta reciente de Soon Khai es la explicación correcta: el índice z no tiene efecto si el elemento no está posicionado
FelipeAls
2
@SpiderMan ¿De dónde se te ocurrió +1? Eso no es válido.
sjagr
6

En mi caso, tuve que mover el código html del elemento que quería al principio al final del archivo html, porque si un elemento tiene índice z y el otro no tiene índice z, no funciona.

Javobal
fuente
Las 2 partes de su respuesta no están relacionadas (al menos sin otros detalles). La primera parte es una solución porque todas las demás propiedades son iguales, el último elemento en el código HTML se muestra sobre las anteriores. La segunda parte es un comentario sobre cómo el índice z tiene algún efecto.
FelipeAls
1
Un buen punto sobre todos los elementos deben tener un índice Z para que funcione. ¡Gracias!
Salah Saleh
3

Otra nota: el índice z debe tenerse en cuenta al mirar objetos secundarios en relación con otros objetos.

Por ejemplo

<div class="container">
    <div class="branch_1">
        <div class="branch_1__child"></div>
    </div>
    <div class="branch_2">
        <div class="branch_2__child"></div>
    </div>
</div>

Si dio branch_1__childun índice z de 99y dio branch_2__childun índice z de 1, pero también dio su branch_2índice z de 10y su branch_1índice z de 1, su branch_1__childtodavía no se mostrará delante de subranch_2__child

De todos modos, lo que estoy tratando de decir es; si un padre de un elemento que le gustaría colocar al frente tiene un índice Z más bajo que su relativo, ese elemento no se colocará más alto.

El índice z es relativo a sus contenedores. Un índice Z colocado en un contenedor más arriba en la jerarquía básicamente inicia una nueva "capa"

Incep [inception] ción

Aquí hay un violín para jugar:

https://jsfiddle.net/orkLx6o8/

ntgCleaner
fuente