CSS Overflow: Auto tidak sah. Adakah nilai negatif elemen induk Z-indeks pelakunya?

CSS SCROLL BAR FACLESSHOOOTING: overflow: auto Punca dan Penyelesaian

Dalam CSS, apabila membuat scrollbars menggunakan overflow: auto , anda kadang -kadang menghadapi masalah yang dipaparkan scrollar tetapi tidak dapat menatal. Artikel ini akan menganalisis kes dan menyediakan penyelesaian.

Penerangan Masalah: Kontena dengan overflow: auto , ketinggian kandungan melebihi bekas, bar tatal muncul, tetapi ia tidak dapat menatal. Nilai atribut z-index unsur induk bekas adalah negatif.

Coretan Kod Masalah:

 Ketinggian: 250px;
saiz kotak: kotak sempadan;
Sempadan-Bottom: 1px Solid #000;
latar belakang warna: #eee;
Limpahan: Auto;
tatal-snap-jenis: y mandatori;
Kedudukan: Relatif;
Z-indeks: 99;

Bekas mempunyai ketinggian 250px, dan overflow: auto ditetapkan, tetapi menatal tidak sah kerana z-index unsur induk adalah nilai negatif.

Punca Analisis: z-index mengawal susunan elemen susunan. Nilai z-index negatif menunjukkan bahawa elemen terletak di bawah elemen lain. Satu z-index negatif elemen induk boleh mengaburkan elemen kanak-kanak, menjadikannya tidak dapat bertindak balas terhadap interaksi pengguna, walaupun elemen kanak-kanak z-index adalah nilai positif.

Penyelesaian: Semak z-index elemen induk, tetapkannya kepada nilai bukan negatif, atau menyesuaikan nilai-nilai z-index unsur-unsur ibu bapa dan kanak-kanak untuk memastikan unsur-unsur kanak-kanak dapat dilihat dan interaktif.

Contoh kod yang boleh tatal secara normal:

<div class="box">
  <div>123</div>
  <div>123</div>
  
</div>

.box {
  Ketinggian: 150px;
  saiz kotak: kotak sempadan;
  Sempadan-Bottom: 1px Solid #000;
  latar belakang warna: #eee;
  Limpahan: Auto;
  tatal-snap-jenis: y mandatori;
  Kedudukan: Relatif;
  Z-indeks: 99;
}

Dalam contoh ini, bekas boleh ditatal secara normal, dan kunci adalah untuk memastikan bahawa z-index unsur induk tidak menjejaskan paparan dan interaksi elemen kanak-kanak. Memastikan nilai Z-indeks unsur induk tidak bertentangan dengan elemen kanak-kanak adalah kunci untuk menyelesaikan masalah.

Atas ialah kandungan terperinci CSS Overflow: Auto tidak sah. Adakah nilai negatif elemen induk Z-indeks pelakunya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!