Przenieś element na wierzch za pomocą CSS

Question 1

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

Question 2

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

Question 3

Uwaga: z-index działa tylko na elementach pozycjonowanych ( position:absolute, position:relativelub position:fixed). Użyj jednego z nich.

Question 4

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.

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