Cara menggunakan susun atur Kedudukan CSS untuk mencapai kedudukan mutlak elemen

Cara menggunakan susun atur Kedudukan CSS untuk mencapai kedudukan mutlak elemen

Dalam pembangunan bahagian hadapan, susun atur Kedudukan CSS ialah kaedah penentududukan yang biasa digunakan. Dengan menggunakan atribut kedudukan dalam CSS, kami boleh meletakkan elemen ke lokasi tertentu dan mencapai kawalan tepat bagi reka letak elemen pada halaman web. Artikel ini akan memperkenalkan cara menggunakan susun atur Kedudukan CSS untuk mencapai kedudukan mutlak elemen dan memberikan contoh kod khusus.

1. Nilai atribut kedudukan

Dalam CSS, atribut kedudukan mempunyai empat nilai:

1. statik: kedudukan statik, yang juga merupakan kaedah penentududukan lalai. Elemen dibentangkan mengikut susunan semula jadi aliran dokumen dan tidak boleh diletakkan melalui atribut atas, kanan, bawah dan kiri.
2. relatif: kedudukan relatif. Elemen akan dibentangkan mengikut kedudukannya dalam aliran dokumen, dan kedudukan itu boleh diperhalusi melalui atribut atas, kanan, bawah dan kiri.
3. mutlak: kedudukan mutlak. Elemen akan diasingkan daripada aliran dokumen dan diletakkan secara relatif kepada elemen nenek moyangnya yang terdekat yang telah diposisikan (nilai kedudukan adalah relatif, mutlak, tetap Jika tiada elemen nenek moyang, ia akan diposisikan secara relatif kepada elemen akar html.
4. ditetapkan: Kedudukan tetap. Elemen juga diasingkan daripada aliran dokumen, diposisikan relatif kepada tetingkap penyemak imbas, dan tidak menukar kedudukan semasa halaman menatal. . . Atribut atas dan kiri elemen kotak ditetapkan kepada 50px masing-masing, yang bermaksud bahawa elemen akan diletakkan 50px ke kanan dan 50px ke bawah berbanding penjuru kiri atas (0, 0) elemen induk.

Aplikasi kedudukan mutlak dalam elemen kedudukan tetap

<style>
    .container {
        position: relative;
        width: 800px;
        height: 600px;
    }

    .box {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        background-color: #f00;
    }
</style>

<div class="container">
    <div class="box"></div>
</div>

Salin selepas log masuk
1. Dalam contoh di atas, elemen kotak ditetapkan kepada kedudukan tetap, dan kedudukan elemen kotak tidak akan berubah walaupun halaman itu ditatal. Ia akan diletakkan secara relatif kepada tetingkap penyemak imbas, dan nilai yang ditetapkan untuk sifat atas dan kirinya juga relatif kepada sudut kiri atas tetingkap penyemak imbas.

3. Ringkasan

Dengan menggunakan reka letak Kedudukan CSS, kita boleh mencapai kedudukan mutlak elemen. Dengan menetapkan atribut kedudukan elemen kepada mutlak atau tetap, dan menggunakan atribut atas, kanan, bawah dan kiri, kami boleh mengawal kedudukan elemen pada halaman dengan tepat. Dalam pembangunan sebenar, nilai atribut kedudukan yang berbeza boleh digunakan mengikut keperluan khusus, digabungkan dengan skema susun atur CSS, untuk mencapai kesan visual yang terbaik.

Atas ialah kandungan terperinci Cara menggunakan susun atur Kedudukan CSS untuk mencapai kedudukan mutlak elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!