Виведіть елемент спереду за допомогою CSS

Question 1

Я не можу зрозуміти, як перенести зображення спереду за допомогою CSS. Я вже намагався встановити z-індекс на 1000 і розташування на відносний, але він все ще не вдається.

Ось приклад -

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

Розгорніть фрагмент

Question 2

Додайте z-index:-1та position:relativeдо .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>

Розгорніть фрагмент

Question 3

Примітка: Z-індекс працює тільки на розташованих елементів ( position:absolute, position:relativeабо position:fixed). Використовуйте один із них.

Question 4

У моєму випадку мені довелося перенести html-код елемента, який я хотів, спереду в кінці html-файлу, тому що якщо один елемент має z-індекс, а інший не має z-індексу, це не працює.

Question 5

Інша примітка: z-індекс потрібно враховувати, дивлячись на дочірні об’єкти щодо інших об’єктів.

Наприклад

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

Якщо ви дали branch_1__childz-індекс, 99і ви дали branch_2__childz-індекс 1, але ви також дали свій branch_2z-індекс 10і ваш branch_1z-індекс 1, ваш branch_1__childвсе одно не відображатиметься перед вашимbranch_2__child

У будь-якому разі, я намагаюся сказати; якщо батьківський елемент елемента, який ви хочете розмістити спереду, має нижчий z-індекс, ніж його відносний, цей елемент не буде розміщений вище.

Z-індекс відносно його контейнерів. Z-індекс, розміщений на контейнері далі в ієрархії, в основному запускає новий "шар"

Incep [початок] ції

Ось скрипка, з якою можна пограти:

https://jsfiddle.net/orkLx6o8/