CSS kullanarak öğeyi öne getirin

89

Görüntüleri kullanarak ön plana nasıl getireceğimi çözemiyorum CSS. Z-endeksini 1000'e ve konumu göreceli olarak ayarlamayı denedim, ancak yine de başarısız oluyor.

İşte örnek-

#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>
Snippet'i genişlet

html  css  z-index  jsfiddle 
— Stylock
kaynak
Ne öne çıkarılsın? Ayrıca <col> kullanımdan kaldırılmıştır .
— Vucko
Görüntüleri öne getirin.
— Stylock
Menü oluşturmak için neden iç içe geçmiş tablolar kullanıyorsunuz?
— Blender
2
IE8'de menü ile ilgili sorunlar yaşadım ve iç içe geçmiş tablolar bunu düzeltti.
— Stylock
Bu video , nasıl çalıştığını anlamak için son derece yararlıdır.
— J0ANMM

Yanıtlar:

140

Ekle z-index:-1ve position:relative.content için

#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>
Snippet'i genişlet

— Sowmya
kaynak
2
Çözümünüz mükemmel çalıştı. Bunun neden işe yaradığını açıklayabilir misiniz?
— Germstorm
1
@Germstorm, Z-indexgörüntülerin veya div'lerin birbiri üzerine nasıl yığıldığını kontrol eder. Z-endeksi değeri daha yüksek olan div / görüntü ön sırada yer alır ve daha düşük olan geride kalır.
— Sowmya
Sorumun koşullarını tam olarak hatırlamıyorum, ama benim sorunum, ne z-indexişe yaradığını anlamamdı, ama yine de işe yaramadı. Bu cevaptan öğrendiğim şey, z-indexsizinle birlikte ebeveyn hiyerarşisini de dikkate almanız gerektiğidir.
— Germstorm
2
@Germstorm Soon Khai'nin son cevabı doğru açıklama: z-endeksinin öğe konumlandırılmaması durumunda hiçbir etkisi yoktur
— FelipeAls
2
@SpiderMan Nereyi buldunuz +1? Bu geçerli değil.
— sjagr
6

Benim durumumda, istediğim elemanın html kodunu html dosyasının sonunda öne taşımak zorunda kaldım, çünkü eğer bir elemanın z-endeksi varsa ve diğerinde z endeksi yoksa işe yaramıyor.

— Javobal
kaynak
Cevabınızın 2 bölümü birbiriyle ilişkili değil (en azından başka ayrıntı içermiyor). Birinci kısım bir çözümdür çünkü diğer tüm özellikler eşittir HTML kodundaki ikinci eleman öncekilerin üzerinde görüntülenir. İkinci kısım, z-endeksinin nasıl bir etkiye sahip olduğuna dair bazı yorumlardır.
— FelipeAls
1
tüm öğeler hakkında iyi bir nokta, çalışması için z-endeksine sahip olmalıdır. Teşekkürler!
— Salah Saleh
5

Başka bir Not: Diğer nesnelere göre alt nesnelere bakarken z-endeksi dikkate alınmalıdır.

Örneğin

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

Eğer verdiyse branch_1__childz-index 99ve verdi branch_2__child1 z-index, ancak aynı zamanda verdi branch_2z-index 10ve branch_1z-index 1, senin branch_1__childhala önünde görünmez seninbranch_2__child

Her neyse, söylemeye çalıştığım şey; Öne yerleştirilmesini istediğiniz bir öğenin ebeveyninin z-endeksi göreceliğinden daha düşükse, bu öğe daha yükseğe yerleştirilmez.

Z-endeksi, kapsayıcılarına göredir. Hiyerarşinin daha yukarısındaki bir kapsayıcıya yerleştirilen bir z-dizini, temelde yeni bir "katman" başlatır

Başlangıç ​​[başlangıç]

İşte oynanacak bir keman:

https://jsfiddle.net/orkLx6o8/

— ntgCleaner
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.