使用CSS将元素放在最前面


87

我不知道如何使用来显示图像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>


带什么去前面?也<COL> IS弃用
Vucko

将图像放在前面。
Stylock

为什么要使用嵌套表制作菜单?
Blender

2
我在IE8中遇到菜单问题,并且嵌套表对其进行了修复。
Stylock

该视频对于了解其工作原理非常有帮助。
J0ANMM '01年

Answers:


135

添加z-index:-1position: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>


2
您的解决方案运行完美。您能解释一下为什么这样做吗?
Germstorm

1
@GermstormZ-index控制图像或div彼此堆叠的方式。z-index值较高的Div /图像排在前面,较低的将保持在后面。
Sowmya 2015年

我真的不太清楚我的问题的情况,但是我的问题是,我了解了什么z-index,但仍然没有用。我从这个答案中学到的是,z-index您还必须考虑父级层次结构。
Germstorm

2
@Germstorm Soon Khai的最新答案是正确的解释:如果未定位元素,则z-index不起作用
FelipeAls 2015年

2
@SpiderMan你从哪里想到的+1?那是无效的。
sjagr


6

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


答案的两部分无关(至少没有其他详细信息)。第一部分是一种解决方案,因为HTML代码中与后一个元素相同的其他属性显示在前一个之上。第二部分是有关z-index如何起作用的一些评论。
FelipeAls 2015年

1
关于所有元素的一个好处是必须具有z-index才能起作用。谢谢!
萨拉·萨利赫

3

另一个注意事项:在查看相对于其他对象的子对象时,必须考虑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__childz-index为,99并且给branch_2__childz-index为1,但您也给branch_2z-index为,10branch_1z-index为1,则branch_1__child仍然不会出现在branch_2__child

无论如何,我想说的是:如果您想放在最前面的元素的父元素的Z索引比其相对元素的Z索引低,则该元素的位置不会更高。

Z索引是相对于其容器的。放置在层次结构中更远的容器上的z索引基本上会启动一个新的“层”

接受

这是一个玩弄的小提琴:

https://jsfiddle.net/orkLx6o8/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.