Question

我无法弄清楚如何使用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>

Answer 1

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

Answer 2

注意：z-index only works on positioned elements（position:absolute，position:relative或position:fixed）。使用其中之一。

Answer 3

在我的情况下，我必须在html文件的末尾移动我想要的元素的html代码，因为如果一个元素具有z-index而另一个元素没有z索引则不会工作。

Answer 4

另一个注意：在查看相对于其他对象的子对象时，必须考虑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__child提供了99的z索引，并且您给branch_2__child的z索引为1，但您还为branch_2提供了z-index 10的{{1}}和branch_1的{{1}} z索引，1仍然不会显示在branch_1__child

前面

无论如何，我想说的是;如果您想要放在前面的元素的父元素的z-index低于其相对值，则该元素不会放在更高的位置。

z-index相对于其容器。放置在层次结构中更远的容器上的z-index基本上开始一个新的“层”

Incep [开始]和灰

这是一个小提琴：

https://jsfiddle.net/orkLx6o8/

使用CSS将元素添加到前面

4 个答案: