Porta l'elemento in primo piano usando CSS

89

Non riesco a capire come portare le immagini in primo piano usando CSS. Ho già provato a impostare z-index su 1000 e posizione su relativo, ma non riesce ancora.

Ecco un esempio-

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

html  css  z-index  jsfiddle 
— Stylock
fonte
Portare cosa davanti? Anche il <col> è deprecato .
— Vucko
Porta le immagini in primo piano.
— Stylock
Perché stai usando tabelle nidificate per creare un menu?
— Blender
2
Ho avuto problemi con il menu in IE8 e le tabelle nidificate lo hanno risolto.
— Stylock
Questo video è estremamente utile per capire come funziona.
— J0ANMM

Risposte:

140

Aggiungi 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>
Espandi lo snippet

— Sowmya
fonte
2
La tua soluzione ha funzionato perfettamente. Puoi spiegare perché funziona?
— Germstorm
1
@Germstorm Z-indexcontrolla come le immagini o i div si sovrappongono l'una sull'altra. Div / immagine con un valore z-index più alto si trova in primo piano e un valore inferiore rimarrebbe dietro.
— Sowmya
Non ricordo chiaramente le circostanze della mia domanda, ma il mio problema era che ho capito cosa z-indexfa, ma ancora non ha funzionato. Quello che ho imparato da questa risposta è che con z-indexte devi prendere in considerazione anche la gerarchia dei genitori.
— Germstorm
2
@Germstorm La risposta recente di Soon Khai è la spiegazione corretta: lo z-index non ha effetto se l'elemento non è posizionato
— FelipeAls
2
@SpiderMan Dove sei arrivato +1? Non è valido.
— sjagr
6

Nel mio caso ho dovuto spostare il codice html dell'elemento che volevo in primo piano alla fine del file html, perché se un elemento ha z-index e l'altro non ha z index non funziona.

— Javobal
fonte
Le 2 parti della tua risposta non sono correlate (almeno senza altri dettagli). La prima parte è una soluzione perché tutte le altre proprietà uguali a quest'ultimo elemento nel codice HTML viene visualizzato sopra i precedenti. La seconda parte è un commento su come z-index ha qualche effetto.
— FelipeAls
1
buon punto su tutti gli elementi devono avere z-index perché funzioni. Grazie!
— Salah Saleh
5

Un'altra nota: z-index deve essere considerato quando si guardano gli oggetti figli rispetto ad altri oggetti.

Per esempio

<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 hai dato branch_1__childuno z-index di 99e hai dato branch_2__childuno z-index di 1, ma hai anche dato il tuo branch_2z-index di 10e il tuo branch_1z-index di 1, il tuo branch_1__childancora non verrà mostrato davanti al tuobranch_2__child

Comunque, quello che sto cercando di dire è; se un genitore di un elemento che vorresti fosse posizionato davanti ha uno z-index inferiore al suo relativo, quell'elemento non verrà posizionato più in alto.

Lo z-index è relativo ai suoi contenitori. Uno z-index posizionato su un contenitore più in alto nella gerarchia fondamentalmente inizia un nuovo "livello"

Incep [inizio] zione

Ecco un violino con cui giocare:

https://jsfiddle.net/orkLx6o8/

— ntgCleaner
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.