Analisis mendalam tentang konteks melata dalam css

Artikel ini akan membincangkan tentang konteks lata dalam CSS dan membandingkan tahap lata melalui contoh.

Beberapa masa lalu, syarikat itu mula mempromosikan perniagaan platform kod rendah, dan saya bernasib baik kerana menyertainya. Dalam tempoh ini, konteks cascading css telah terlibat, dan ia menyebabkan saya beberapa masalah Untuk melaksanakan logik perniagaan dengan lebih baik, saya fikir adalah lebih baik untuk mengkaji konteks css secara mendalam. Semua orang mesti tahu bahawa halaman web adalah dua dimensi, tetapi kandungannya adalah tiga dimensi Selain x dan y yang lebih intuitif, terdapat juga paksi z yang tidak begitu intuitif.

Elemen konteks lata

Dalam proses pembangunan harian kami, terdapat beberapa atribut yang biasa digunakan melibatkan konteks lata:

• kedudukan: mutlak | |. melekit

• z-index

• float: kiri | kanan

• transform

Perbandingan peringkat susun

Perbandingan peringkat mudah tanpa melibatkan sarang nenek moyang dan cucu:

z- indeks: -1 unsur nenek moyang.

Nota:

Hierarki konteks lata ialah anak kepada hierarki elemen HTML, kerana hanya elemen tertentu yang mencipta konteks berlatarkan. Boleh dikatakan bahawa elemen yang tidak mencipta konteks tindanannya sendiri akan diasimilasikan

oleh konteks tindanan induk . Masalah Praktikal

Semasa proses pelaksanaan visual, saya menghadapi masalah: semasa proses seret dan lepas tahap bersarang, sudah ada tahap pada elemen induk bersarang. Masalahnya ialah unsur moyang dan cucu dipengaruhi oleh unsur moyang, dan akan diliputi oleh elemen "aliran dokumen biasa" apabila menyeret. Selepas tempoh penyelidikan, didapati bahawa masalah itu disebabkan oleh pengaruh konteks susun yang berbeza.

Pertempuran praktikal

1. Perbandingan konteks melata pada tahap yang sama

Memandangkan terdapat terlalu banyak kod, saya tidak akan membuang ruang di sini Demonstrasi dijalankan, dan hasil operasi saya dimuat naik secara langsung. Melalui gambar di bawah, kita boleh mengesahkan perbandingan hierarki tahap yang sama yang dinyatakan di atas.

2 Perbandingan konteks susun untuk kedudukan yang berbeza

Untuk kedudukan, tanpa menggunakan z Dalam kes -index, konteks lata unsur adik beradik adalah lebih besar daripada konteks lata unsur adik beradik. Dalam istilah manusia, ini bermakna konteks melata bagi unsur-unsur berikut adalah lebih tinggi daripada unsur-unsur sebelumnya.

    .fixed {
      position: fixed;
      top: 0;
      left: 0;
      background: red;
    }

    .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background: green;
    }

    .absolute {
      position: absolute;
      top: 60px;
      left: 60px;
      background: yellow;
    }

    .sticky {
      position: sticky;
      top: 60px;
      left: 90px;
      background: pink;
    }

3 Perbandingan tahap tindanan dalam konteks tindanan yang berbeza

Mula-mula kita semak Sekarang. mari kita lihat isu-isu praktikal yang dinyatakan di atas, pelaksanaan tahap lata dalam konteks lata yang berbeza.

Blok merah dan blok hijau ialah dua elemen adik-beradik, di mana aras susun merah lebih tinggi daripada aras susun hijau, menyebabkan dua elemen dalam blok merah genap mempunyai tahap tindanan Lebih rendah daripada elemen blok oren, tetapi kesan bersihnya ialah tahap tindanan oren lebih rendah daripada unsur blok yang lain.

Di sini, izinkan saya menyebut penyelesaian saya kepada masalah di atas, iaitu mengubah suai tahap unsur nenek moyang secara dinamik. Walau bagaimanapun, saya secara peribadi merasakan bahawa kaedah ini perlu dikaji Menyusahkan apabila terdapat banyak peringkat bersarang. Jika sesiapa mempunyai cara yang lebih baik, sila tinggalkan mesej di bawah.

    .purple {
      top: 20px;
      left: 20px;
      background: purple;
      z-index: 10;
    }

    .pink {
      top: 60px;
      left: 60px;
      background: pink;
      z-index: 20;
    }

    .orange {
      top: 10px;
      left: 10px;
      background: orange;
      z-index: 999;
    }

(Mempelajari perkongsian video:

tutorial video css

)

Atas ialah kandungan terperinci Analisis mendalam tentang konteks melata dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!