Traga o elemento para a frente usando CSS

87

Não consigo descobrir como trazer as imagens para a frente usando CSS. Já tentei definir o índice z como 1000 e a posição como relativa, mas ainda falhou.

Aqui está um exemplo

#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 snippet

html css z-index jsfiddle Stylock
fonte
Trazer o que frente? Além disso, o <col> está obsoleto .
Vucko,
Traga as imagens para a frente.
Stylock
Por que você está usando tabelas aninhadas para fazer um menu?
Blender
2
Tive problemas com o menu no IE8 e as tabelas aninhadas corrigiram o problema.
Stylock
Este vídeo é extremamente útil para entender como funciona.
J0ANMM

Respostas:

135

Adicionar z-index:-1e position:relativea .content

#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 snippet

Sowmya
fonte
2
Sua solução funcionou perfeitamente. Você pode explicar por que isso funciona?
Germstorm
1
@Germstorm Z-indexcontrola como as imagens ou divs se sobrepõem . Div / imagem com valor de índice z superior fica em primeiro lugar e o valor inferior fica para trás.
Sowmya
Eu realmente não me lembro das circunstâncias da minha pergunta com clareza, mas meu problema era que eu entendi o que z-indexsignifica, mas ainda não funcionou. O que aprendi com essa resposta é que z-indexvocê também deve levar em consideração a hierarquia dos pais.
Tempestade germinativa de
2
@Germstorm A resposta recente de Soon Khai é a explicação correta: o z-index não tem efeito se o elemento não estiver posicionado
FelipeAls
2
@SpiderMan De onde você veio +1? Isso não é válido.
sjagr
6

No meu caso, eu tive que mover o código html do elemento que eu queria na frente, no final do arquivo html, porque se um elemento tem índice z e o outro não tem índice z, ele não funciona.

Javobal
fonte
As 2 partes da sua resposta não estão relacionadas (pelo menos sem outros detalhes). A primeira parte é uma solução porque todas as outras propriedades iguais ao último elemento no código HTML são exibidas acima das anteriores. A segunda parte é um comentário sobre como o z-index tem algum efeito.
FelipeAls
1
bom ponto sobre todos os elementos deve ter z-index para que funcione. obrigado!
Salah Saleh
3

Outra nota: o z-index deve ser considerado ao observar objetos filhos em relação a outros objetos.

Por exemplo

<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>

Se você forneceu branch_1__childum z-index de 99e branch_2__childum z-index de 1, mas também deu branch_2um z-index de 10e branch_1um z-index de 1, seu branch_1__childainda não aparecerá na frente de seubranch_2__child

De qualquer forma, o que estou tentando dizer é; se o pai de um elemento que você gostaria de colocar na frente tiver um índice z menor do que seu relativo, esse elemento não será colocado em um nível mais alto.

O z-index é relativo a seus contêineres. Um Z-index colocado em um contêiner mais acima na hierarquia basicamente inicia uma nova "camada"

Início [início] ção

Aqui está um violino para brincar:

https://jsfiddle.net/orkLx6o8/

ntgCleaner
fonte