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>
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
)。それらの1つを使用してください。
私の場合は、HTMLファイルの最後の先頭に必要な要素のHTMLコードを移動する必要がありました。1つの要素にz-indexがあり、もう一方の要素にz-indexがない場合は機能しないためです。
他の注:他のオブジェクトと関連して子オブジェクトを見るときは、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インデックスを与え、branch_2__child
に1のzインデックスを与えたが、あなたはまたあなたのbranch_2
に10
そしてあなたのbranch_1
に1
のzインデックスを与えたとしても、branch_1__child
は表示されません。 branch_2__child
の前に
とにかく、私が言おうとしているのは、前面に配置したい要素の親が、相対位置よりも小さいZインデックスを持っている場合、その要素は上に配置されません。
Zインデックスはそのコンテナに相対的です。階層のさらに上のコンテナに配置されたzインデックスは、基本的に新しい「レイヤ」を開始します。
インセプション[インセプション]
これが遊ぶためのフィドルです。