web-dev-qa-db-ja.com

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;
    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>
htmlcsscss3z-indexjsfiddle
66
Stylock

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>
107
Sowmya

注：z-index 配置された要素に対してのみ機能します （position:absolute、position:relative、またはposition:fixed）。それらの1つを使用してください。

28
Soon Khai

私の場合は、HTMLファイルの最後の先頭に必要な要素のHTMLコードを移動する必要がありました。1つの要素にz-indexがあり、もう一方の要素にz-indexがない場合は機能しないためです。

4
Javobal

他の注：他のオブジェクトと関連して子オブジェクトを見るときは、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インデックスは、基本的に新しい「レイヤ」を開始します。

インセプション[インセプション]

これが遊ぶためのフィドルです。

https://jsfiddle.net/orkLx6o8/

1
ntgCleaner