使用CSS将元素置于最前面
使用CSS将元素置于最前面
提问于 2013-04-03 16:11:33
我想不出如何用CSS把图片放在前面。我已经尝试将z-index设置为1000，并将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;
}
.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>
Stack Overflow用户
发布于 2017-01-13 02:43:30
另请注意:在相对于其他对象查看子对象时，必须考虑Z索引。
例如
<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提供了1的z索引，但您还为branch_2提供了10的z索引，为branch_1提供了1的z索引，则branch_1__child仍然不会显示在branch_2__child的前面
无论如何，我想说的是:如果您想放在前面的元素的父元素的z索引比它的相对元素低，那么这个元素就不会被放得更高。
Z索引是相对于它的容器的。放置在层次结构中较高位置的容器上的z索引基本上开始了一个新的“层”。
概念概念
这里有一个可以玩玩的小提琴：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15782078
复制相关文章
相似问题
腾讯云开发者
