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

Я не могу понять, как вывести изображения на передний план с помощью 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
person Stylock    schedule 03.04.2013    source источник
comment
Что вынести вперед? Кроме того, ‹col› устарел.   -  person Vucko    schedule 03.04.2013
comment
Перенесите изображения на передний план.   -  person Stylock    schedule 03.04.2013
comment
Почему вы используете вложенные таблицы для создания меню?   -  person Blender    schedule 03.04.2013
comment
У меня были проблемы с меню в IE8 и вложенные таблицы исправили это.   -  person Stylock    schedule 03.04.2013
comment
Это видео чрезвычайно полезно для понимания того, как это работает.   -  person J0ANMM    schedule 11.01.2017

Ответы (4)


arrow_upward
147
arrow_downward

Добавьте 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>

person Sowmya    schedule 03.04.2013
comment
Ваше решение сработало отлично. Не могли бы вы объяснить, почему это работает? - person Germstorm; 15.05.2014
comment
@Germstorm Z-index контролирует, как изображения или элементы div накладываются друг на друга. Div/изображение с более высоким значением z-индекса занимает переднее место, а более низкое остается позади. - person Sowmya; 16.06.2015
comment
Я не очень хорошо помню обстоятельства моего вопроса, но моя проблема была в том, что я понял, что делает z-index, но все равно это не сработало. Из этого ответа я узнал, что с z-index вы также должны учитывать родительскую иерархию. - person Germstorm; 16.06.2015
comment
@Germstorm Недавний ответ от Soon Khai является правильным объяснением: z-index не имеет эффекта, если элемент не позиционирован - person FelipeAls; 09.07.2015
comment
И используйте z-index: +1, чтобы вывести что-то на передний план :D - person Nabin; 15.07.2015
comment
@SpiderMan Где ты придумал +1? Это недействительно. - person sjagr; 30.09.2015

arrow_upward
46
arrow_downward

Примечание: z-index работает только с позиционированными элементами (position:absolute, position:relative или position:fixed ). Используйте один из них.

person Soon Khai    schedule 26.06.2015

arrow_upward
7
arrow_downward

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

person Javobal    schedule 09.07.2015
comment
Две части вашего ответа не связаны (по крайней мере, без других подробностей). Первая часть является решением, потому что другие свойства равны, последний элемент в HTML-коде отображается над предыдущими. Вторая часть — это комментарий о том, как влияет z-index. - person FelipeAls; 09.07.2015
comment
хороший момент о том, что все элементы должны иметь z-индекс, чтобы он работал. Спасибо! - person Salah Saleh; 19.02.2016

arrow_upward
5
arrow_downward

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

Например

<div class="container">
    <div class="branch_1">
        <div class="branch_1__child"></div>
    </div>
    <div class="branch_2">
        <div class="branchbranch_1__child_child"></div>
    </div>
</div>

Если вы дали branch_1__child z-индекс 99, а branch_2__child z-индекс 1, но также дали branch_2 z-индекс 10 и branch_1 z-индекс 1, ваш branch_1__child все равно не появится. перед твоим branch_2__child

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

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

Начало [начало] ция

Вот скрипка, чтобы поиграть:

https://jsfiddle.net/orkLx6o8/

person ntgCleaner    schedule 12.01.2017