Przenieś element na wierzch za pomocą CSS

89

Nie mogę wymyślić, jak przenieść obrazy na wierzch za pomocą CSS. Próbowałem już ustawić indeks z na 1000 i pozycję na względną, ale nadal się to nie udaje.

Oto przykład-

#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>
Rozwiń fragment

html css z-index jsfiddle Stylock
źródło
Co przynieść na wierzch? Również <col> jest przestarzałe .
Vucko,
Przesuń obrazy na wierzch.
Stylock
Dlaczego używasz zagnieżdżonych tabel do tworzenia menu?
Blender
2
Miałem problemy z menu w IE8 i zagnieżdżone tabele to naprawiły.
Stylock
Ten film jest niezwykle pomocny w zrozumieniu, jak to działa.
J0ANMM

Odpowiedzi:

140

Dodaj z-index:-1i position:relativedo .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>
Rozwiń fragment

Sowmya
źródło
2
Twoje rozwiązanie zadziałało idealnie. Czy możesz wyjaśnić, dlaczego to działa?
Germstorm
1
@Germstorm Z-indexkontroluje, jak obrazy lub elementy div nakładają się na siebie. DIV / obraz z wyższą wartością indeksu Z zajmuje pierwsze miejsce, a niższy zostałby z tyłu.
Sowmya
Nie pamiętam dokładnie okoliczności mojego pytania, ale mój problem polegał na tym, że rozumiałem, co z-indexdziała, ale nadal nie działało. To, czego nauczyłem się z tej odpowiedzi, to to, że w przypadku z-indexCiebie należy również wziąć pod uwagę hierarchię nadrzędną.
Germstorm
2
@Germstorm Ostatnia odpowiedź od Soon Khai jest poprawnym wyjaśnieniem: indeks z nie ma wpływu, jeśli element nie jest ustawiony
FelipeAls
2
@SpiderMan Gdzie wymyśliłeś +1? To nie jest ważne.
sjagr
6

W moim przypadku musiałem przenieść kod html elementu, który chciałem, z przodu na końcu pliku html, ponieważ jeśli jeden element ma indeks z, a drugi nie ma indeksu z, to nie działa.

Javobal
źródło
Dwie części Twojej odpowiedzi nie są powiązane (przynajmniej bez żadnych innych szczegółów). Pierwsza część jest rozwiązaniem, ponieważ wszystkie inne właściwości równe drugiemu elementowi w kodzie HTML są wyświetlane nad poprzednimi. Druga część to komentarz o tym, jak indeks z ma wpływ.
FelipeAls
1
dobra uwaga na temat wszystkich elementów musi mieć indeks Z, aby działał. dzięki!
Salah Saleh
5

Kolejna uwaga: indeks z musi być brany pod uwagę podczas patrzenia na obiekty potomne względem innych obiektów.

Na przykład

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

Jeśli podałeś branch_1__childindeks z 99i podałeś branch_2__childindeks z równy 1, ale podałeś również branch_2indeks z 10i branch_1indeks z z 1, branch_1__childnadal nie pojawi się przedbranch_2__child

W każdym razie to, co próbuję powiedzieć, to; jeśli element nadrzędny elementu, który chcesz umieścić na początku, ma niższy indeks z niż jego względny, element ten nie zostanie umieszczony wyżej.

Indeks z odnosi się do jego kontenerów. Indeks Z umieszczony w kontenerze wyżej w hierarchii zasadniczo rozpoczyna nową „warstwę”

Incep [incepcja]

Oto skrzypce do zabawy:

https://jsfiddle.net/orkLx6o8/

ntgCleaner
źródło