z-index dan konteks penumpukan

Pelajaran posisi menyebut bahwa angka z-index hanya dibandingkan di dalam konteks penumpukan yang sama. Pelajaran ini membahas apa itu konteks penumpukan, apa saja yang membentuknya, dan cara memperbaiki menu yang tertutup elemen lain meski z-index-nya besar.

Konteks penumpukan adalah kelompok elemen yang ditumpuk bersama. Di dalam kelompok itu, anak-anak diurutkan dengan z-index masing-masing; dari luar, seluruh kelompok diperlakukan sebagai satu lapisan dan diurutkan dengan z-index induknya. Akibatnya, anak dengan z-index 9999 tetap berada di bawah elemen lain bila induknya kalah urutan.

MDN mendaftar banyak pemicunya. Yang paling sering ditemui: elemen html itu sendiri; elemen position relative atau absolute dengan z-index selain auto; elemen fixed dan sticky; item flex atau grid dengan z-index selain auto; opacity di bawah 1; transform selain none; dan isolation: isolate.

.kepala {
  position: relative;
  z-index: 2;
}

.kartu {
  position: relative;
  z-index: 1;
}

.kartu .tooltip {
  position: absolute;
  z-index: 100; /* tetap di bawah .kepala */
}

Pada contoh di atas, tooltip ber-z-index 100 hidup di dalam konteks milik .kartu. Konteks itu bernilai 1 sedangkan .kepala bernilai 2, jadi tooltip tetap tertutup kepala. Menaikkan angka tooltip tidak menolong; yang harus diubah adalah urutan .kartu terhadap .kepala, atau letak tooltip di HTML.

Properti isolation: isolate membentuk konteks baru tanpa mengubah posisi apa pun. Properti ini dipasang pada sebuah komponen supaya angka z-index di dalamnya tidak bersaing dengan bagian halaman lain.