带元素前面使用CSS
我不知道如何使用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>
添加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>
注意：z-index 仅适用于定位元素 （ position:absolute ， position:relative或position:fixed ）。 使用其中之一。
在我的情况下，我不得不移动在HTML文件的末尾我想要的元素的HTML代码，因为如果一个元素有Z索引，而另一个没有Z索引它不起作用。
另一个注意：当查看与其他对象相关的子对象时，必须考虑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__child一个99的z-index，并且给了branch_2__child一个z-索引为1，但是你也给了你的branch_2一个z-索引10和你的branch_1一个z-索引1 ，那么你的branch_1__child仍然不会显示出来在你的branch_2__child前面
无论如何，我想说的是， 如果您希望放置在前面的元素的父元素的Z-index低于其相对元素，则该元素将不会放在较高的位置。
z-index是相对于它的容器。 放置在层次结构更上层的容器上的z索引基本上开始一个新的“层”
Incep [开始]重刑
这是一个小提琴玩耍：
