Kemahiran aplikasi fleksibel atribut kedudukan dalam H5-html tutorial-php.cn

Kemahiran aplikasi fleksibel atribut kedudukan dalam H5

王林

Lepaskan： 2023-12-27 13:05:19

asal

830 orang telah melayarinya

Kemahiran aplikasi fleksibel atribut kedudukan dalam H5

Cara menggunakan atribut kedudukan secara fleksibel dalam H5

Dalam pembangunan H5, kedudukan dan susun atur elemen sering terlibat. Pada masa ini, sifat kedudukan CSS akan mula dimainkan. Atribut kedudukan boleh mengawal kedudukan elemen pada halaman, termasuk kedudukan relatif, kedudukan mutlak, kedudukan tetap dan kedudukan melekit. Artikel ini akan memperkenalkan secara terperinci cara menggunakan atribut kedudukan secara fleksibel dalam pembangunan H5 dan memberikan contoh kod khusus.

Kedudukan relatif (relatif)

Kedudukan relatif ialah cara sesuatu elemen diletakkan dalam aliran dokumen biasa, dengan kedudukannya berbanding kedudukannya sendiri dalam aliran dokumen biasa. Apabila menggunakan kedudukan relatif, anda boleh melaraskan kedudukan elemen melalui atribut atas, kanan, bawah dan kiri. Berikut ialah kod sampel yang menunjukkan cara menggunakan kedudukan relatif untuk memindahkan elemen ke bawah 20px:

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        position: relative;
        top: 20px;
    }
</style>
</head>
<body>

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

</body>
</html>

Salin selepas log masuk

Kedudukan mutlak (mutlak)

Kedudukan mutlak ialah apabila elemen diposisikan relatif kepada kedudukan nenek moyang atau kedudukan tetingkap penyemak imbas terdekatnya. Jika tiada unsur nenek moyang yang diposisikan, elemen tersebut akan diposisikan secara relatif kepada blok yang mengandungi asal, iaitu elemen akar dokumen. Anda juga boleh menggunakan atribut atas, kanan, bawah dan kiri untuk melaraskan kedudukan elemen. Berikut ialah contoh kod yang menunjukkan cara menggunakan kedudukan mutlak untuk meletakkan elemen di penjuru kanan sebelah atas halaman:

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>
</head>
<body>

<div class="box">
    这是一个绝对定位的元素
</div>

</body>
</html>

Salin selepas log masuk

Kedudukan tetap (tetap)

Kedudukan tetap ialah cara elemen diletakkan berbanding penyemak imbas tetingkap, iaitu, ia tidak berubah secara rawak Bar skrol menukar kedudukan semasa menatal. Berikut ialah kod sampel yang menunjukkan cara menggunakan kedudukan tetap untuk menyemat elemen ke bahagian bawah halaman:

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        position: fixed;
        bottom: 0;
        width: 100%;
    }
</style>
</head>
<body>

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

</body>
</html>

Salin selepas log masuk

kedudukan melekit (melekit)

Kedudukan melekit ialah apabila elemen diletakkan relatif kepada ambang yang ditentukan sebelumnya melintasinya, dan diposisikan relatif kepada bahagian bawah halaman apabila ia melintasi ambang yang ditentukan Beralih ke mod kedudukan tetap apabila ambang dicapai. Berikut ialah contoh kod yang menunjukkan cara menggunakan kedudukan melekit untuk menetapkan elemen ke bahagian atas halaman apabila menatal mencapai kedudukan tertentu:

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        position: sticky;
        top: 0;
        background-color: yellow;
        padding: 10px;
    }
</style>
</head>
<body>

<div class="box">
    这是一个粘附定位的元素
</div>

<p>在滚动到达这个位置之前，元素将以相对定位为准，滚动到达这个位置后，元素将以固定定位为准。</p>

</body>
</html>

Salin selepas log masuk

Di atas memperkenalkan cara menggunakan atribut kedudukan secara fleksibel dalam pembangunan H5 melalui contoh kod tertentu . Dengan melaraskan parameter yang berbeza, anda boleh mencapai kedudukan percuma dan susun atur elemen pada halaman. Semoga artikel ini dapat memberi manfaat kepada pembaca.

Atas ialah kandungan terperinci Kemahiran aplikasi fleksibel atribut kedudukan dalam H5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!