使用CSS将元素置于最前面

Question

使用CSS将元素置于最前面

119

我不知道如何使用 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>

- Stylock

将什么带到前面？此外，**<col>**已被弃用。 - Vucko

将图像置于最前面。 - Stylock

你为什么要使用嵌套表格来制作菜单？ - Blender

2

我在IE8中遇到了菜单问题，嵌套表格修复了它。 - Stylock

1

这个视频非常有帮助，可以帮助理解它的工作原理。 - J0ANMM

4个回答

54

注意：z-index 仅适用于定位元素（position:absolute，position:relative或position:fixed）。请使用其中之一。

- Soon Khai

他们在问题中说他们将位置设置为相对定位。 - Jacob

8

在我的情况下，我必须将我想要放在前面的元素的HTML代码移动到HTML文件的末尾，因为如果一个元素具有z-index而另一个元素没有z-index，则它不起作用。

- Javobal

你的回答的两个部分没有关联（至少没有其他细节）。第一部分是一个解决方案，因为在所有其他属性相等的情况下，HTML代码中后面的元素会显示在前面的元素上方。第二部分是关于z-index具有某些影响的评论。 - FelipeAls

1

所有元素都必须具有z-index才能正常工作，这是一个很好的观点。谢谢！ - Salah Saleh

8

另外需要注意的是，在查看子对象与其他对象的相对关系时必须考虑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 设置了 z-index 为 99，并且您给 branch_2__child 设置了 z-index 为 1，但是您也将您的 branch_2 的 z-index 设置为 10 并且将您的 branch_1 的 z-index 设置为 1，那么您的 branch_1__child 仍然不会显示在您的 branch_2__child 的前面。

无论如何，我的意思是; 如果一个元素的父级的z-index比它低，那么这个元素就不会被放置在更高的位置。

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

Inception [梦中的剧场]

以下是一个可以进行操作的代码片段： https://jsfiddle.net/orkLx6o8/

- ntgCleaner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sowmya · Accepted Answer

将.content添加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>