使用 CSS 将元素置于最前面答案

【问题标题】：Bring element to front using CSS使用 CSS 将元素置于最前面
【发布时间】：2013-04-03 08:11:32
【问题描述】：

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

【问题讨论】：

把什么放在前面？也是 deprecated.
把图片放在前面。
为什么要使用嵌套表格来制作菜单？
我在 IE8 中的菜单有问题，嵌套表格修复了它。
This video 非常有助于理解它的工作原理。

标签： html css z-index jsfiddle

【解决方案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>

【讨论】：

您的解决方案完美运行。你能解释一下为什么会这样吗？
@Germstorm Z-index 控制图像或 div 相互堆叠的方式。具有较高 z-index 值的 div/image 位于前面，较低的将留在后面。
我不太清楚我的问题的情况，但我的问题是，我明白z-index 做了什么，但它仍然没有用。我从这个答案中学到的是，对于z-index，您还必须考虑父层次结构。
@Germstorm 最近来自 Soon Khai 的回答是正确的解释：如果元素未定位，z-index 无效
@SpiderMan 你从哪里想到+1？这是无效的。

【解决方案2】：

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

【讨论】：

【解决方案3】：

在我的情况下，我必须将我想要的元素的 html 代码移动到 html 文件的末尾，因为如果一个元素有 z-index 而另一个没有 z-index 它就没有工作。

【讨论】：

您的答案的两部分不相关（至少没有其他细节）。第一部分是一个解决方案，因为 HTML 代码中的 al other properties equal 后一个元素显示在前一个元素之上。第二部分是关于 z-index 如何产生一些影响的评论。
所有元素都必须有 z-index 才能正常工作。谢谢！

【解决方案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 一个z-index 99 并且你给branch_2__child 一个z-index 1，但你也给你的branch_2 一个z-index 10 和你的@987654328 @1 的 z-index，您的 branch_1__child 仍然不会出现在您的 branch_2__child 前面

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

z-index 与其容器相关。放置在层次结构中更远的容器上的 z-index 基本上会启动一个新的“层”

Incep[inception]tion

这是一个可以玩的小提琴：

https://jsfiddle.net/orkLx6o8/

【讨论】：