z-index tidak bekerja dengan penentuan posisi tetap

422

Saya punya divdengan posisi default (yaitu position:static) dan divdengan fixedposisi.

Jika saya mengatur indeks-z elemen, tampaknya mustahil untuk membuat elemen tetap berada di belakang elemen statis.

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>
Luaskan cuplikan

Atau di jsfiddle di sini: http://jsfiddle.net/mhFxf/

Saya dapat mengatasi ini dengan menggunakan position:absolute elemen statis, tetapi adakah yang bisa memberitahu saya mengapa ini terjadi?

(Tampaknya ada pertanyaan yang mirip dengan yang ini, ( Fixed Positioning breaking z-index ) tapi itu tidak memiliki jawaban yang memuaskan, maka saya bertanya di sini dengan kode contoh saya)

css z-index DanSingerman
sumber

Jawaban:

146

Pertanyaan ini dapat diselesaikan dengan beberapa cara, tetapi sungguh, mengetahui aturan penumpukan memungkinkan Anda menemukan jawaban terbaik yang cocok untuk Anda.

Solusi

The <html>elemen konteks Anda hanya menumpuk, jadi hanya mengikuti aturan susun dalam konteks susun dan Anda akan melihat bahwa unsur-unsur ditumpuk dalam urutan ini

  1. Elemen root konteks susun ( <html>elemen dalam kasus ini)
  2. Elemen yang diposisikan (dan anak-anak mereka) dengan nilai indeks z negatif (nilai yang lebih tinggi ditumpuk di depan nilai yang lebih rendah; elemen dengan nilai yang sama ditumpuk sesuai dengan penampilan di HTML)
  3. Elemen yang tidak diposisikan (dipesan berdasarkan tampilan dalam HTML)
  4. Elemen yang diposisikan (dan anak-anak mereka) dengan nilai z-index otomatis (dipesan berdasarkan tampilan dalam HTML)
  5. Elemen yang diposisikan (dan anak-anak mereka) dengan nilai indeks z positif (nilai lebih tinggi ditumpuk di depan nilai yang lebih rendah; elemen dengan nilai yang sama ditumpuk sesuai dengan penampilan di HTML)

Jadi kamu bisa

  1. atur z-index -1, untuk #underz-index diposisikan muncul di belakang #overelemen yang tidak diposisikan
  2. atur posisi #overke relativesehingga aturan 5 berlaku untuk itu

Masalah sebenarnya

Pengembang harus mengetahui hal-hal berikut sebelum mencoba mengubah urutan elemen.

  1. Ketika konteks susun terbentuk
    • Secara default, <html>elemen adalah elemen root dan merupakan konteks penumpukan pertama
  2. Menyusun urutan dalam konteks susun

Aturan susun susun dan susunan konteks aturan di bawah ini dari tautan ini

Ketika konteks susun terbentuk

  • Ketika sebuah elemen adalah elemen root dari sebuah dokumen ( <html>elemen)
  • Ketika suatu elemen memiliki nilai posisi selain statis dan nilai indeks-z selain otomatis
  • Ketika suatu elemen memiliki nilai opacity kurang dari 1
  • Beberapa properti CSS yang lebih baru juga membuat konteks susun. Ini termasuk: transformasi, filter, css-region, media halaman, dan mungkin lainnya. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • Sebagai aturan umum, tampaknya jika properti CSS memerlukan rendering dalam konteks offscreen, itu harus membuat konteks susun baru.

Susun Urutan dalam Konteks Susun

Urutan elemen:

  1. Elemen root konteks susun ( <html>elemen adalah satu-satunya konteks susun secara default, tetapi elemen apa pun bisa menjadi elemen root untuk konteks susun, lihat aturan di atas)
    • Anda tidak bisa meletakkan elemen turunan di belakang elemen konteks susun root
  2. Elemen yang diposisikan (dan anak-anak mereka) dengan nilai indeks z negatif (nilai yang lebih tinggi ditumpuk di depan nilai yang lebih rendah; elemen dengan nilai yang sama ditumpuk sesuai dengan penampilan di HTML)
  3. Elemen yang tidak diposisikan (dipesan berdasarkan tampilan dalam HTML)
  4. Elemen yang diposisikan (dan anak-anak mereka) dengan nilai z-index otomatis (dipesan berdasarkan tampilan dalam HTML)
  5. Elemen yang diposisikan (dan anak-anak mereka) dengan nilai indeks z positif (nilai lebih tinggi ditumpuk di depan nilai yang lebih rendah; elemen dengan nilai yang sama ditumpuk sesuai dengan penampilan di HTML)
Mr_Moneybags
sumber
3
Beberapa mungkin menemukan ini membantu juga: Apa Yang Tidak Ada yang Memberitahu Anda Tentang Z-Index
Mentalist
450

Tambahkan position: relative;ke # lebih

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>
Luaskan cuplikan

Biola

stephenmurdoch
sumber
14
update.html5rocks.com/2012/09/... adalah referensi yang bagus tentang bagaimana posisi tetap, absolut dan relatif berinteraksi dengan z-index.
Apakah
@marflar Dengan senang hati. Btw, lihat biola Anda. ada tag ekstra </body>dan tag ekstra </html>pada akhirnya.
Michel Ayres
2
Berikut adalah biola yang menunjukkan konteks penumpukan. Dijelaskan di sini .
kdbanman
Menghapus position: relativedari elemen berlebihan sebenarnya memperbaiki masalah saya.
Alex G
thanksssssss <3
Karl Anthony Baluyot
32

z-index hanya berfungsi dalam konteks tertentu yaitu relative,fixed atau absoluteposisi.

z-index untuk div relatif tidak ada hubungannya dengan z-indexdiv absolut atau tetap.

EDIT Ini adalah jawaban yang tidak lengkap. Jawaban ini memberikan informasi yang salah. Harap tinjau komentar dan contoh @ Dansingerman di bawah ini.

cusimar9
sumber
3
Bisakah Anda memperluas cara kerja indeks-z dalam konteks tertentu, dan / atau memberikan referensi?
DanSingerman
13
z-index mempengaruhi urutan dua divs walaupun satu posisi relatif dan yang lainnya absolut.
Raffael
65
Jawaban ini salah. Berikut adalah biola yang menunjukkan konteks susun seperti yang dijelaskan di sini . @Dansingerman.
kdbanman
1
Terima kasih atas jsFiddle @kbdanman Anda, ini membantu saya memahami konteks penumpukan dengan visual.
dhruvpatel
8
@ JoMorano, Tinggi z lebih dekat ke atas, terlepas dari penentuan posisi absolut atau relatif. Yang penting adalah level dalam pohon dokumen. Div 4, 5, 6 adalah anak-anak dari div 3, sedangkan div 1 dan 2 adalah saudara dari div 3. Div 1 memiliki z yang lebih tinggi daripada div 3, jadi div 1 ada di atas div 3 dan semua anak-anaknya. Div 2 memiliki z lebih rendah daripada div 3, jadi div 3 dan semua anak-anaknya berada di atas div 2
kdbanman
31

karena overdiv Anda tidak memiliki penentuan posisi, z-index tidak tahu di mana dan bagaimana memposisikannya (dan berkenaan dengan apa?). Ubah saja posisi over div Anda menjadi relatif, sehingga tidak ada efek samping pada div itu dan kemudian div di bawah akan mematuhi kehendak Anda.

di sini adalah contoh Anda di jsfiddle: Fiddle

sunting : Saya melihat seseorang telah menyebutkan jawaban ini!

saya serius
sumber
18

Berikan yang #undernegatif z-index, mis-1

Ini terjadi karena z-index properti diabaikan position: static;, yang merupakan nilai default; jadi dalam kode CSS yang Anda tulis, z-indexadalah 1untuk kedua elemen tidak peduli seberapa tinggi Anda mengaturnya #over.

Dengan memberikan #undernilai negatif, itu akan berada di belakang z-index: 1;elemen apa pun , yaitu#over .

Carlos Precioso
sumber
Saya punya masalah ini juga - pengaturan 'di bawah' div ke 0 bekerja untuk saya.
Mick Sear
5

Saya sedang membangun menu nav. Saya miliki overflow: hiddendi css nav saya yang menyembunyikan segalanya. Saya pikir itu adalah masalah indeks-z, tetapi sebenarnya saya menyembunyikan segala sesuatu di luar nav saya.

mantra
sumber
0

perilaku elemen tetap (dan elemen absolut) sebagaimana didefinisikan dalam Spesifikasi CSS:

Mereka berperilaku seperti mereka terlepas dari dokumen, dan ditempatkan di orangtua tetap / absolut diposisikan terdekat. (bukan kata demi kata kutipan)

Ini membuat perhitungan zindex sedikit rumit, saya memecahkan masalah saya (situasi yang sama) dengan secara dinamis membuat wadah di elemen tubuh dan memindahkan semua elemen seperti itu (yang diklasifikasi sebagai "yang diperbaiki" di dalam elemen tingkat tubuh itu) )

Bakhshi
sumber