Rumah > hujung hadapan web > html tutorial > Mengapa elemen induk perlu menetapkan kedudukan?

Mengapa elemen induk perlu menetapkan kedudukan?

DDD
Lepaskan: 2023-10-07 11:52:25
asal
998 orang telah melayarinya

Elemen induk menetapkan kedudukan untuk mengawal kedudukan dan susun atur elemen anaknya. Nilai yang berbeza mempunyai kegunaan yang berbeza: 1. statik, yang membolehkan elemen dibentangkan mengikut aliran dokumen biasa dan tidak terjejas oleh atribut kedudukan lain 2. relatif, yang mencipta bekas yang agak kedudukannya untuk membungkus elemen dan kawalan kanak-kanak mereka. Susun atur; 3. Mutlak, mencipta bekas yang diposisikan secara mutlak, digunakan untuk mengawal kedudukan tepat elemen kanak-kanak 4. Tetap, mencipta bekas dengan kedudukan tetap, digunakan untuk mencipta elemen tetap pada halaman, dsb.

Mengapa elemen induk perlu menetapkan kedudukan?

Sistem pengendalian tutorial ini: sistem Windows 10, komputer Dell G3.

Tujuan menetapkan atribut kedudukan elemen induk adalah untuk mengawal kedudukan dan susun atur elemen anaknya. Atribut kedudukan boleh digunakan untuk menukar kaedah penentududukan elemen Nilai biasa termasuk statik, relatif, mutlak dan tetap.

1. statik:

statik ialah nilai lalai atribut kedudukan Elemen dibentangkan mengikut aliran dokumen biasa dan tidak dipengaruhi oleh atribut kedudukan lain. Jika elemen induk tidak menetapkan atribut kedudukan, kedudukan elemen anak juga akan dibentangkan mengikut aliran dokumen biasa, iaitu elemen anak akan disusun mengikut susunannya dalam HTML.

2. relatif:

Apabila elemen induk menetapkan atribut kedudukan kepada relatif, kedudukan elemen anak boleh diimbangi secara relatif kepada elemen induk dengan menetapkan atribut atas, kanan, bawah dan kiri. Kaedah penentududukan ini tidak mengubah kedudukan elemen anak dalam aliran dokumen, tetapi diimbangi secara relatif kepada elemen induk.

Senario aplikasi biasa untuk menetapkan kedudukan:relatif pada elemen induk ialah mencipta bekas yang agak kedudukannya untuk membungkus elemen anak dan mengawal reka letaknya. Dengan menetapkan atribut atas, kanan, bawah dan kiri elemen kanak-kanak, kedudukan dan susun atur elemen kanak-kanak berbanding dengan elemen induk boleh dicapai.

3 mutlak:

Apabila elemen induk menetapkan atribut kedudukan kepada mutlak, kedudukan elemen anak boleh diimbangi secara relatif kepada unsur nenek moyang kedudukan terdekatnya. Jika tiada unsur nenek moyang yang diposisikan, kedudukan unsur kanak-kanak diimbangi berbanding dengan blok asal yang mengandungi dokumen.

Senario aplikasi biasa untuk menetapkan kedudukan:mutlak pada elemen induk ialah mencipta bekas dengan kedudukan mutlak untuk mengawal kedudukan tepat elemen kanak-kanak. Dengan menetapkan atribut atas, kanan, bawah dan kiri elemen kanak-kanak, anda boleh mencapai kedudukan tepat elemen kanak-kanak berbanding dengan elemen induk atau blok yang mengandungi awal dokumen.

4. tetap:

Apabila elemen induk menetapkan atribut kedudukan kepada tetap, kedudukan elemen anak akan diimbangi berbanding tetingkap penyemak imbas. Kaedah penentududukan ini tidak akan berubah dengan menatal, dan elemen anak akan sentiasa kekal dalam kedudukan tetap.

Senario aplikasi biasa untuk menetapkan kedudukan:ditetapkan pada elemen induk ialah mencipta bekas dengan kedudukan tetap untuk mencipta elemen tetap pada halaman, seperti bar navigasi atau kotak terapung.

Ringkasan:

Tujuan menetapkan atribut kedudukan elemen induk adalah untuk mengawal kedudukan dan susun atur elemen anaknya. Anda boleh menukar cara elemen anak diposisikan secara relatif kepada elemen induk atau dokumennya dengan menetapkan atribut kedudukan kepada relatif, mutlak atau tetap. Kaedah penentududukan ini boleh mencapai kedudukan relatif, kedudukan mutlak atau kedudukan tetap sub-elemen, dengan itu mencapai kesan susun atur yang lebih fleksibel.

Atas ialah kandungan terperinci Mengapa elemen induk perlu menetapkan kedudukan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan