使用CSS将元素添加到前面

Question

使用CSS将元素添加到前面

Sty*_*ock 74 html css z-index css3 jsfiddle

我无法弄清楚如何使用前面的图像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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sow*_*mya 110

添加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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

您的解决方案完美无缺你能解释一下为什么这个有用吗？ (2认同)
@Germstorm 最近来自 Soon Khai 的回答是正确的解释：如果元素未定位，则 z-index 无效 (2认同)
@SpiderMan你在哪里提出`+ 1`？那是无效的. (2认同)

Answer 2

小智 32

注:Z-指标只适用于定位的元素(position:absolute,position:relative,或position:fixed).使用其中之一.

Answer 3

小智 7

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

Answer 4

ntg*_*ner 6

另一个注意事项：在查看相对于其他对象的子对象时，必须考虑 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>

Run Code Online (Sandbox Code Playgroud)

如果你给出branch_1__child的 z-index99和你branch_2__child的 z-index 为 1，但你也给出了你branch_2的 z-index10和你branch_1的 z-index 1，你branch_1__child仍然不会出现在你的前面branch_2__child

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

z-index 是相对于它的容器。放置在层次结构中更靠上的容器上的 z-index 基本上启动了一个新的“层”

成立[inception]tion

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

https://jsfiddle.net/orkLx6o8/

归档时间：	12 年，8 月前
查看次数：	356686 次
最近记录：	6 年，8 月前