Html 使用 CSS 将元素置于最前面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15782078/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bring element to front using CSS
提问by Stylock
I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails.
我不知道如何使用CSS. 我已经尝试将 z-index 设置为 1000 并将位置设置为相对，但它仍然失败。
Here's example-
举个例子——
#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>回答by Sowmya
Add z-index:-1and position:relativeto .content
添加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>回答by Soon Khai
Note: z-index only works on positioned elements(position:absolute, position:relative, or position:fixed). Use one of those.
注意：z-index仅适用于定位元素（position:absolute、position:relative、 或position:fixed）。使用其中之一。
回答by Javobal
In my case i had to move the html code of the element i wanted at the front at the end of the html file, because if one element has z-index and the other doesn't have z index it doesn't work.
在我的情况下，我不得不将我想要的元素的 html 代码移动到 html 文件末尾的前面，因为如果一个元素具有 z-index 而另一个没有 z 索引，则它不起作用。
回答by ntgCleaner
Another Note: z-index must be considered when looking at children objects relative to other objects.
另一个注意事项：在查看相对于其他对象的子对象时，必须考虑 z-index。
For example
例如
<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>
If you gave branch_1__childa z-index of 99and you gave branch_2__childa z-index of 1, but you also gave your branch_2a z-index of 10and your branch_1a z-index of 1, your branch_1__childstill will not show up in front of your branch_2__child
如果你给了branch_1__child一个 z-index99并且你给了branch_2__child一个 z-index ，但是你也给了你branch_2的 z-index10和你branch_1的 z-index 1，你branch_1__child仍然不会出现在你的前面branch_2__child
Anyways, what I'm trying to say is; if a parent of an element you'd like to be placed in front has a lower z-index than its relative, that element will not be placed higher.
无论如何，我想说的是；如果您希望放置在前面的元素的父元素的 z-index 低于其相对元素，则该元素不会被放置在更高的位置。
The z-index is relative to its containers. A z-index placed on a container farther up in the hierarchy basically starts a new "layer"
z-index 是相对于它的容器。放置在层次结构中更靠上的容器上的 z-index 基本上启动了一个新的“层”
Incep[inception]tion
成立[inception]tion
Here's a fiddle to play around:
这是一个可以玩的小提琴：
