Kuasai pelbagai nilai dan kesan atribut kedudukan dalam H5

Untuk memahami nilai yang berbeza dan kesan atribut kedudukan dalam H5, anda memerlukan contoh kod khusus

Dalam HTML5, atribut kedudukan digunakan untuk mengawal kedudukan elemen pada halaman. Ia mempunyai empat nilai berbeza: statik (nilai lalai), relatif, mutlak dan tetap. Setiap nilai mempunyai kesan dan senario aplikasi yang berbeza. Nilai ini dan kesannya akan diperkenalkan secara terperinci di bawah, dan contoh kod khusus akan diberikan.

1. statik
   statik ialah nilai lalai atribut kedudukan Kedudukan elemen pada halaman ditentukan oleh aliran dokumen dan tidak dipengaruhi oleh elemen lain. Ia tidak boleh dilaraskan melalui sifat atas, bawah, kiri dan kanan, dan susunan tindanan juga tidak boleh dilaraskan melalui indeks-z. Kod sampel adalah seperti berikut:

<div class="static-box">我是一个静态定位的元素</div>

.static-box {
    position: static;
}

2. relative
   kedudukan relatif relatif adalah relatif kepada kedudukan asal elemen. Kedudukan elemen masih menempati ruang asal dan tidak mengganggu aliran dokumen. Anda boleh mengawal offset elemen melalui atribut atas, bawah, kiri dan kanan. Elemen yang diposisikan secara relatif boleh disusun menggunakan atribut indeks-z. Kod sampel adalah seperti berikut:

<div class="relative-box">我是一个相对定位的元素</div>

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

3. mutlak
   Kedudukan mutlak mutlak diposisikan secara relatif kepada elemen induk kedudukan terdekat Jika tiada elemen induk diposisikan, ia diposisikan secara relatif kepada dokumen. Kedudukan elemen tidak lagi menduduki ruang asalnya dan bebas daripada aliran dokumen. Anda boleh mengawal offset elemen melalui atribut atas, bawah, kiri dan kanan. Elemen yang diposisikan secara mutlak boleh disusun menggunakan atribut indeks-z. Kod sampel adalah seperti berikut:

<div class="absolute-parent">
    <div class="absolute-box">我是一个绝对定位的元素</div>
</div>

.absolute-parent {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #ccc;
}

.absolute-box {
    position: absolute;
    top: 20px;
    left: 20px;
}

4. ditetapkan
   kedudukan tetap tetap diposisikan berbanding tetingkap penyemak imbas, dan kedudukan elemen kekal tidak berubah apabila halaman ditatal. Anda boleh mengawal offset elemen melalui atribut atas, bawah, kiri dan kanan. Susunan susunan elemen kedudukan tetap boleh dilaraskan melalui atribut indeks-z. Kod sampel adalah seperti berikut:

<div class="fixed-box">我是一个固定定位的元素</div>

.fixed-box {
    position: fixed;
    top: 20px;
    left: 20px;
}

Menerusi kod sampel di atas, kita boleh memahami dengan jelas nilai yang berbeza dari atribut kedudukan dalam H5 dan kesannya. Dalam pembangunan sebenar, memilih kaedah penentududukan yang sesuai mengikut keperluan khusus boleh mengawal kedudukan dan perhubungan susunan elemen dengan lebih baik, seterusnya mencapai kesan susun atur yang kaya dan pelbagai.

Atas ialah kandungan terperinci Kuasai pelbagai nilai dan kesan atribut kedudukan dalam H5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!