Вынести элемент на передний план с помощью CSS

87

Я не могу понять, как вывести изображения на первый план CSS. Я уже пробовал установить z-index на 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>
Развернуть фрагмент

html css z-index jsfiddle Стилок
источник
Что вынести на передний план? Кроме того , <цв> есть устаревшие .
Vucko
Вынесите изображения на передний план.
Stylock
Почему вы используете вложенные таблицы для создания меню?
Blender
2
У меня были проблемы с меню в IE8, и вложенные таблицы исправили его.
Stylock
Это видео очень помогает понять, как это работает.
J0ANMM

Ответы:

135

Добавить 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>
Развернуть фрагмент

Sowmya
источник
2
Ваше решение сработало отлично. Не могли бы вы объяснить, почему это работает?
Germstorm
1
@Germstorm Z-indexконтролирует, как изображения или div накладываются друг на друга. Div / image с более высоким значением z-index занимает переднее место, а более низкое остается позади.
Sowmya
Я не очень хорошо помню обстоятельства своего вопроса, но моя проблема заключалась в том, что я понимал, что z-indexделает, но все равно это не сработало. Из этого ответа я понял, что z-indexвы также должны учитывать родительскую иерархию.
Germstorm
2
@Germstorm Недавний ответ от Soon Khai - правильное объяснение: z-index не действует, если элемент не позиционирован
FelipeAls
2
@SpiderMan Откуда вы взяли +1? Это неверно.
sjagr
6

В моем случае мне пришлось переместить html-код элемента, который я хотел, в начало в конце html-файла, потому что, если у одного элемента есть z-index, а у другого нет z-индекса, это не сработает.

Джавобал
источник
Две части вашего ответа не связаны (по крайней мере, без других деталей). Первая часть - это решение, потому что все остальные свойства равны последнему элементу в HTML-коде, который отображается над предыдущими. Вторая часть - это комментарий о том, как z-index имеет какое-то влияние.
FelipeAls 09
1
Хороший момент для всех элементов должен иметь z-index, чтобы он работал. Благодарность!
Салах Салех
3

Еще одно примечание: z-index необходимо учитывать при рассмотрении дочерних объектов относительно других объектов.

Например

<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-index 99и дали branch_2__childz-index 1, но вы также дали branch_2z-index 10и branch_1z-index 1, ваш branch_1__childвсе равно не будет отображаться перед вашимbranch_2__child

В любом случае, я пытаюсь сказать; если родительский элемент элемента, который вы хотите разместить впереди, имеет меньший z-индекс, чем его родственник, этот элемент не будет размещен выше.

Z-index относится к его контейнерам. Z-индекс, размещенный на контейнере выше по иерархии, в основном запускает новый «слой»

Incep [начало]

Вот скрипка, с которой можно поиграть:

https://jsfiddle.net/orkLx6o8/

ntgCleaner
источник