Penjelasan terperinci tentang kedudukan dan aplikasi kedudukan div+css

Bacaan lanjutan
* Tafsiran mutlak dan relatif
* Kedudukan: peringkat relatif/mutlak yang tidak boleh dipecahkan
* Tambahan kepada artikel "The Unbreakable Level"

Kedudukan sentiasa menjadi kesukaran dalam penerapan standard WEB Jika kedudukannya tidak jelas, kesan yang sepatutnya dicapai mungkin tidak dicapai, dan kesan yang dicapai mungkin tidak dapat dicapai. Jika prinsip penentududukan diperjelaskan, penentududukan akan menjadikan halaman web lebih sempurna.

Takrifan kedudukan:

Kandungan tentang kedudukan dalam CSS ialah: kedudukan: relatif | statik mutlak

statik tidak mempunyai tetapan khas dan mengikut peraturan kedudukan asas. Ia tidak boleh hierarki melalui z-index.
relatif tidak melepaskan diri daripada aliran dokumen, merujuk kepada kedudukan statiknya sendiri melalui kedudukan atas, bawah, kiri, kanan dan boleh berhierarki melalui indeks-z.
Mutlak diasingkan daripada aliran dokumen dan diletakkan di atas, bawah, kiri dan kanan. Pilih elemen kedudukan induk yang terdekat Apabila kedudukan induk adalah statik, elemen mutlak akan diletakkan pada asal koordinat badan dan boleh digredkan secara hierarki melalui indeks-z.
kedudukan tetap tetap, di sini objek tetap ialah tetingkap visual dan bukannya elemen badan atau induk. Pengelasan hierarki boleh dilakukan melalui indeks-z.

Klasifikasi meletak kedudukan dalam CSS: z-index: auto | namber;

auto mengikut kedudukan objek induknya
namber Nilai integer tanpa unit. Boleh menjadi negatif

Prinsip kedudukan:

Elemen yang boleh disesarkan (kedudukan relatif)

Dalam aliran teks, mana-mana elemen mempunyai kedudukannya sendiri yang dihadkan oleh aliran teks, tetapi melalui CSS kita masih boleh membuat elemen ini menukar kedudukannya Kita boleh menggunakan apungan untuk membuat elemen terapung, dan kita juga boleh menggunakan margin untuk membuat mereka terapung Unsur itu digerakkan. Tetapi sebenarnya, itu bukanlah anjakan sebenar, kerana ia hanya penipuan yang dicapai dengan meningkatkan nilai margin. Anjakan dalam erti kata sebenar dijana oleh atas, kanan, bawah, kiri (selepas ini dirujuk sebagai TRBL, TRBL boleh dibahagikan kepada dua bahagian) untuk elemen yang agak kedudukannya.

Dan kami ambil perhatian bahawa titik koordinat elemen yang diposisikan adalah pada titik tepi kiri atas nilai margin, iaitu titik B dalam gambar. Kemudian semua pengiraan anjakan akan berdasarkan titik ini untuk menolak elemen. Arah anjakan adalah kohesif apabila TRBL positif. Dapat disimpulkan bahawa apabila TRBL negatif, arah sesaran adalah ke luar. Dalam gambar, terdapat anak panah anjakan yang menunjuk kepada tanda Tanda tambah menunjukkan arah anjakan positif, dan tanda tolak menunjukkan arah anjakan negatif. Mengenai anjakan dan orientasi, anda boleh membaca lebih lanjut Yi Fei "Bercakap tentang atribut margin daripada yang mudah kepada yang dalam (1)"

Elemen yang boleh berada pada sebarang kedudukan (kedudukan mutlak)

Seperti yang dinyatakan di atas: Kedudukan relatif hanya boleh menggerakkan kedudukan ke atas, bawah, kiri dan kanan dalam aliran teks Ia juga mempunyai had tertentu Walaupun kawasan pembentangannya dipisahkan daripada aliran teks menyimpan tempat untuknya dalam aliran teks Ini Ia seperti pekerja asing yang pergi ke tempat lain, tetapi masih mempunyai tempat khusus untuknya di kampung halamannya, dan tempat ini tidak berubah dengan pergerakannya. Tetapi ini jelas akan meninggalkan ruang kosong Jika anda mahu aliran teks meninggalkan bahagian ini, anda perlu menggunakan kedudukan mutlak. Kedudukan mutlak bukan sahaja melepaskan diri daripada aliran teks, tetapi juga tidak meninggalkan ruang eksklusif untuk elemen yang diposisikan secara mutlak ini dalam aliran teks. Ini seperti jawatan di kilang Jika seorang pekerja keluar, pekerja lain secara semula jadi akan mengisi jawatan tersebut. Bahagian yang bergerak keluar secara semula jadi menjadi badan bebas. Kedudukan mutlak akan menetapkan elemen kepada sebarang kedudukan melalui TRBL. Apabila sifat kedudukan lapisan induk ialah nilai lalai, asal koordinat TRBL bermula dari asal koordinat badan.

Kedudukan mutlak yang berkaitan

Kedudukan di atas adalah satu kedudukan mutlak, tetapi dalam aplikasi sebenar kita selalunya perlu menggunakan borang khas. Iaitu, anda mahu elemen yang diposisikan mempunyai ciri kedudukan mutlak, tetapi anda juga berharap bahawa asal koordinat kedudukan mutlak boleh dibetulkan pada titik tertentu dalam halaman web Apabila titik ini dialihkan, elemen yang diposisikan secara mutlak boleh memastikan kedudukan relatifnya berbanding koordinat asal. Maksudnya, kedudukan mutlak ini perlu bergerak dengan halaman web dan ditetapkan pada kedudukan tetap pada halaman web. Biasanya kesan ini amat penting apabila halaman web dipusatkan. Cara asas untuk mencapai kesan ini ialah menetapkan induk yang diposisikan mutlak kepada kedudukan relatif atau kedudukan mutlak. Kemudian koordinat kedudukan mutlak akan mengambil induk sebagai titik permulaan koordinat.

Walaupun demikian, asal koordinat bukanlah asal koordinat ibu bapa Ini adalah kedudukan koordinat yang sangat pelik.

Elemen yang sentiasa kelihatan (kedudukan tetap)

En raison d'abus de publicité, certains logiciels de navigation ont commencé à bloquer le contenu publicitaire, ce qui rend certains bons effets déconseillés. Par exemple, un élément peut continuellement changer de position à mesure que la page Web défile. Maintenant, je peux obtenir un tel effet grâce à un attribut de positionnement en CSS. Cet attribut d'élément est position:fixed, qui n'était pas pris en charge dans le passé, sa signification est : positionnement fixe. Cette fixation est très similaire au positionnement absolu. La seule différence est que le positionnement absolu est fixé à une certaine position dans la page Web, tandis que le positionnement fixe est fixé à la position du cadre d'affichage du navigateur.

Bien que le navigateur d'origine ne prenait pas en charge cet attribut, le développement des navigateurs a permis aux navigateurs avancés d'aujourd'hui d'analyser correctement cet attribut CSS. Et grâce à CSS HACK, IE6 peut obtenir cet effet (actuellement IE5.x ne peut pas obtenir cet effet). Afin de ne pas faire de cet article un long article, seul cet exemple est donné ici pour terminer cet article. Vous pouvez analyser vous-même certains problèmes liés à cet exemple. Si vous ne comprenez pas quelque chose, laissez-moi un message !