使用CSS将元素置于前端 [英] Bring element to front using CSS
本文介绍了使用CSS将元素置于前端的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不知道如何使用 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;背景：#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>
解决方案
添加 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;背景：#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>
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.
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>
解决方案
Add z-index:-1 and position:relative to .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>
这篇关于使用CSS将元素置于前端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
