Вывести элемент на передний план с помощью CSS
Я не могу понять, как вывести изображения с помощью CSS
. Я уже пробовал установить z-индекс на 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;
}
html lang-html prettyprint-override"><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>
4 ответов
добавить z-index:-1
и position:relative
to .содержание
#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-индекс должен учитываться при просмотре дочерних объектов относительно других объектов.
<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
z-индекс 99
и ты дал branch_2__child
z-индекс 1, но вы также дали свой branch_2
z-индекс 10
и свой branch_1
z-индекс 1
ваш branch_1__child
по-прежнему не будет отображаться перед вашим branch_2__child
в любом случае, что я пытаюсь сказать; если родитель элемента вы бы как быть помещенным впереди имеет более низкий Z-индекс, чем его родственник, этот элемент не будет помещен выше.
Z-индекс относительно его контейнеров. Z-индекс, помещенный в контейнер выше по иерархии, в основном запускает новый "слой"
Incep[начало] tion
вот скрипка, чтобы играть вокруг: