Bawa elemen ke depan menggunakan CSS

89

Saya tidak tahu cara menampilkan gambar ke depan menggunakan CSS. Saya sudah mencoba mengatur z-index ke 1000 dan posisi ke relatif, tetapi masih gagal.

Berikut contoh-

#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>
Luaskan cuplikan

html css z-index jsfiddle Stylock
sumber
Bawa apa ke depan? Juga <col> sudah tidak digunakan lagi .
Vucko
Bawa gambar ke depan.
Stylock
Mengapa Anda menggunakan tabel bersarang untuk membuat menu?
Blender
2
Saya punya masalah dengan menu di IE8 dan tabel bersarang memperbaikinya.
Stylock
Video ini sangat membantu untuk memahami cara kerjanya.
J0ANMM

Jawaban:

140

Tambahkan z-index:-1dan position:relativeke .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>
Luaskan cuplikan

Sowmya
sumber
2
Solusi Anda bekerja dengan sempurna. Bisakah Anda menjelaskan mengapa ini berhasil?
Germstorm
1
@Germstorm Z-indexmengontrol bagaimana gambar atau div saling menumpuk. Div / gambar dengan nilai indeks-z yang lebih tinggi berada di depan dan lebih rendah akan tetap di belakang.
Sowmya
Saya tidak terlalu ingat keadaan pertanyaan saya dengan jelas, tetapi masalah saya adalah, bahwa saya mengerti apa yang z-indexdilakukannya, tetapi tetap saja tidak berhasil. Apa yang saya pelajari dari jawaban ini adalah, bahwa z-indexAnda harus mempertimbangkan hierarki orang tua juga.
Germstorm
2
@Germstorm Jawaban terbaru dari Soon Khai adalah penjelasan yang benar: z-index tidak berpengaruh jika elemen tidak diposisikan
FelipeAls
2
@SpiderMan Dari mana Anda datang +1? Itu tidak valid.
sjagr
6

Dalam kasus saya, saya harus memindahkan kode html dari elemen yang saya inginkan di bagian depan pada akhir file html, karena jika satu elemen memiliki z-index dan yang lainnya tidak memiliki indeks z itu tidak berfungsi.

Javobal
sumber
2 bagian dari jawaban Anda tidak terkait (setidaknya tanpa detail lainnya). Bagian pertama adalah solusi karena semua properti lain sama dengan elemen terakhir dalam kode HTML ditampilkan di atas yang sebelumnya. Bagian kedua adalah beberapa komentar tentang bagaimana z-index memiliki pengaruh.
FelipeAls
1
poin yang baik tentang semua elemen harus memiliki z-index agar dapat bekerja. Terima kasih!
Salah Saleh
5

Catatan Lain: indeks-z harus diperhatikan saat melihat objek anak relatif terhadap objek lain.

Sebagai contoh

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

Jika Anda memberikan branch_1__childsebuah z-index of 99dan Anda memberikan branch_2__childsebuah z-index dari 1, tetapi Anda juga memberikan Anda branch_2sebuah z-index dari 10dan Anda branch_1z-index of 1, Anda branch_1__childmasih tidak akan muncul di depan Andabranch_2__child

Bagaimanapun, yang ingin saya katakan adalah; jika induk dari elemen yang ingin Anda tempatkan di depan memiliki indeks-z yang lebih rendah dari relatifnya, elemen tersebut tidak akan ditempatkan lebih tinggi.

Z-index relatif terhadap container-nya. Indeks-z yang ditempatkan pada penampung lebih jauh dalam hierarki pada dasarnya memulai "lapisan" baru

Incep [awal] tion

Berikut biola untuk dimainkan:

https://jsfiddle.net/orkLx6o8/

ntgCleaner
sumber