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

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

вот!--4--> 

#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>
4 57
html css css3 z-index jsfiddle

4 ответа:

добавить z-index:-1 и position:relative для .содержание

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

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

25

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

3

другое Примечание: 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__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-индекс, размещенный на контейнере дальше в иерархии, в основном запускает новый "слой"

Incep[начало] tion

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

https://jsfiddle.net/orkLx6o8/

1