Analisis sifat bertindih CSS: kedudukan dan apungan

Analisis atribut bertindih CSS: kedudukan dan apungan

Dalam CSS, kedudukan dan apungan ialah dua atribut bertindih yang biasa digunakan, ia boleh menukar gelagat reka letak elemen dan mencapai pelbagai kesan halaman yang kompleks. Artikel ini akan menganalisis kedua-dua sifat ini secara terperinci dan memberikan contoh kod khusus.

1. Atribut kedudukan

Atribut kedudukan mentakrifkan kaedah kedudukan elemen yang biasa digunakan adalah statik, relatif, mutlak dan tetap.

1. statik: Nilai lalai, elemen disusun secara normal mengikut aliran dokumen, tidak perlu menyatakan atribut atas, kanan, bawah dan kiri.

2. relatif: Kedudukan relatif, elemen diposisikan secara relatif kepada kedudukan normalnya. Offset kedudukan boleh ditentukan melalui atribut atas, kanan, bawah dan kiri.

   Kod sampel:

   .box {
     position: relative;
     top: 10px;
     left: 20px;
   }

3. mutlak: Kedudukan mutlak, elemen dikeluarkan daripada aliran dokumen dan diposisikan secara relatif kepada elemen nenek moyang tidak statik yang terdekat. Jika tiada unsur nenek moyang yang tidak diposisikan secara statik, ia diposisikan secara relatif kepada tetingkap penyemak imbas.

   Kod sampel:

   .box {
     position: absolute;
     top: 50px;
     right: 100px;
   }

4. ditetapkan: kedudukan tetap, elemen diletakkan relatif kepada tetingkap penyemak imbas dan tidak menatal dengan bar skrol.

   Kod contoh:

   .box {
     position: fixed;
     bottom: 20px;
     left: 10px;
   }

2. Atribut terapung

Atribut apungan mentakrifkan kaedah terapung bagi elemen yang biasa digunakan adalah kiri, kanan dan tiada.

1. kiri: Elemen terapung ke kiri, keluar dari aliran dokumen dan elemen lain akan mengelilinginya.

2. kanan: Elemen terapung ke kanan, keluar dari aliran dokumen dan elemen lain akan mengelilinginya.

   Kod sampel:

   .box {
     float: left;
   }

3. tiada: Nilai lalai, elemen tidak terapung dan disusun secara normal mengikut aliran dokumen.

3. Perbezaan dan sambungan antara kedudukan dan apungan

1. Mata yang sama:

   • Kedua-duanya boleh mencapai perubahan kedudukan dan susun atur elemen.
   • Apabila menggunakan kedua-duanya, elemen itu terlepas daripada aliran dokumen dan tidak lagi menduduki kedudukan aliran biasa.

2. Perbezaan:

   • Atribut kedudukan tidak mengubah model kotak elemen Apabila ditetapkan kepada mutlak atau tetap, elemen tidak menduduki kedudukan dalam aliran dokumen dan tidak menjejaskan reka letak elemen lain. . Atribut apungan akan menukar model kotak elemen dan elemen terapung akan dikelilingi oleh elemen lain.
   • Apabila menggunakan atribut kedudukan, anda boleh menentukan kedudukan tertentu elemen melalui atribut atas, kanan, bawah dan kiri. Apabila menggunakan atribut float, anda hanya boleh menentukan arah terapung elemen.
   • Atribut kedudukan boleh melaksanakan susun atur yang lebih kompleks, seperti susun atur melata, kedudukan mutlak, dsb. Atribut apungan lebih banyak digunakan untuk melaksanakan gambar pembalut teks, susun atur berbilang lajur, dsb.

Ringkasnya, kedudukan dan apungan biasanya digunakan atribut bertindih dalam CSS, dan ia boleh mencapai pelbagai kesan reka letak halaman yang kompleks. Penggunaan munasabah kedua-dua atribut ini boleh menjadikan reka letak halaman lebih fleksibel dan cantik.

Saya harap artikel ini akan membantu anda memahami kedudukan dan atribut apungan, dan memberi anda rujukan untuk menggunakan kedua-dua atribut ini dalam pembangunan sebenar.

Atas ialah kandungan terperinci Analisis sifat bertindih CSS: kedudukan dan apungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!