Rumah > Artikel > hujung hadapan web > Perbezaan dan perkaitan antara elemen berkedudukan mutlak dan elemen berkedudukan agak

Perbezaan dan perkaitan antara elemen berkedudukan mutlak dan elemen berkedudukan agak

WBOYasal: 2024-01-23 10:12:06829semak imbas

Perbezaan dan perkaitan antara elemen berkedudukan mutlak dan elemen berkedudukan agak memerlukan contoh kod khusus

Dalam HTML dan CSS, kami sering menggunakan kedudukan mutlak dan kedudukan relatif untuk mengawal kedudukan dan susun atur elemen. Kedudukan mutlak dan kedudukan relatif ialah dua kaedah penentududukan biasa, dan ia mempunyai ciri dan kegunaan yang berbeza dalam aplikasi praktikal. Artikel ini akan memperkenalkan secara terperinci perbezaan dan perkaitan antara elemen kedudukan mutlak dan elemen kedudukan relatif, dan memberikan beberapa contoh kod khusus untuk membantu pembaca memahami dan menggunakan kedua-dua kaedah kedudukan ini dengan lebih baik.

1. Ciri-ciri dan kegunaan elemen berkedudukan mutlak

Elemen yang diposisikan secara mutlak akan dipisahkan daripada aliran dokumen dan tidak akan menduduki ruang: Elemen yang diposisikan secara mutlak tidak akan menjejaskan elemen lain dan akan dipisahkan daripada aliran dokumen biasa tidak menjejaskan elemen lain. Oleh itu, elemen yang diposisikan secara mutlak boleh diletakkan secara bebas di mana-mana pada halaman tanpa dihadkan oleh elemen lain.
Gunakan atribut atas, kiri, kanan dan bawah untuk mengawal kedudukan: Elemen yang diposisikan secara mutlak boleh menentukan kedudukan khusus mereka pada halaman dengan menetapkan nilai atribut atas, kiri, kanan dan bawah. Nilai sifat ini boleh berupa nilai piksel, peratusan, atau bahkan nilai negatif.
Kedudukan hanya dalam skop elemen kedudukan tidak statik yang terdekat: Kedudukan akhir unsur kedudukan mutlak adalah relatif kepada unsur nenek moyang tidak statik (tidak lalai) yang terdekat. Jika tiada unsur kedudukan tidak statik yang sepadan ditemui, elemen kedudukan mutlak akan diletakkan berdasarkan dokumen.
Elemen yang diposisikan secara mutlak boleh meliputi elemen lain: Oleh kerana elemen yang diposisikan secara mutlak akan terlepas daripada aliran dokumen, ia boleh ditindih di atas elemen biasa untuk mencapai kesan penutup.

Senario aplikasi tipikal elemen yang diletakkan secara mutlak adalah untuk mencipta menu terapung, kotak pop timbul atau kesan hiasan khas.

Berikut ialah contoh kod untuk elemen yang diposisikan secara mutlak:

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: absolute;
            top: 100px;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div><!-- 绝对定位元素 -->
    <p>这是一个普通的段落</p>
</body>
</html>

Dalam contoh di atas, kotak ialah elemen yang diposisikan secara mutlak Dengan menetapkan atribut atas dan kiri, ia diletakkan 100px dari bahagian atas halaman dan 200px dari. sebelah kiri halaman.

2. Ciri-ciri dan kegunaan elemen berkedudukan agak

Elemen kedudukan relatif masih menempati ruang: Elemen kedudukan relatif masih menempati ruang pada halaman dan tidak akan terlepas daripada aliran dokumen. Elemen lain akan dibentangkan mengikut kedudukan asal elemen yang agak kedudukannya Walaupun elemen yang agak kedudukannya bergerak, reka letak tidak akan terjejas.
Gunakan atribut atas, kiri, kanan dan bawah untuk penalaan halus: Elemen yang diposisikan secara relatif juga boleh diperhalusi dengan menetapkan nilai atribut atas, kiri, kanan dan bawah. Nilai sifat ini dikira secara relatif kepada kedudukan asal elemen dalam dokumen.
Berlaku pada dirinya sendiri dan elemen anak: Sifat penentududukan relatif terpakai pada dirinya sendiri dan elemen anak yang terkandung di dalamnya. Elemen kanak-kanak boleh diletakkan dengan merujuk kepada kedudukan elemen yang agak berkedudukan.

Elemen kedudukan relatif biasanya digunakan untuk memperhalusi kedudukan elemen untuk mencapai reka letak yang lebih fleksibel dalam senario tertentu.

Berikut ialah kod sampel untuk elemen yang agak berkedudukan:

<!DOCTYPE html>
<html>
<head>
    <style>
        #box {
            position: relative;
            top: 20px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"><!-- 相对定位元素 -->
        <p>这是一个相对定位元素内的段落</p>
    </div>
</body>
</html>

Dalam contoh di atas, kotak ialah elemen yang agak kedudukannya Dengan menetapkan atribut atas dan kiri, ia telah dialihkan 20px ke bawah dan ke kanan berdasarkannya kedudukan asal. Elemen perenggan juga diletakkan secara relatif kepada kotak.

3. Hubungan antara elemen kedudukan mutlak dan elemen kedudukan relatif

Kedudukan relatif adalah asas kedudukan mutlak: Kedudukan relatif ialah satu bentuk khas kedudukan mutlak. Sebelum menetapkan kedudukan mutlak sesuatu elemen, kami biasanya menetapkannya kepada kedudukan relatif dahulu, dan kemudian menggunakan atribut seperti atas dan kiri untuk kedudukan tertentu.
Elemen berkedudukan mutlak dan elemen berkedudukan agak boleh wujud pada masa yang sama: Elemen berkedudukan mutlak dan elemen berkedudukan agak boleh wujud pada masa yang sama pada halaman yang sama. Susun atur antara mereka tidak mengganggu antara satu sama lain dan boleh diletakkan secara bebas pada halaman.
Atribut indeks-z boleh digunakan untuk mengawal susunan unsur-unsur: Dengan menetapkan nilai atribut indeks-z, anda boleh mengawal susunan unsur-unsur kedudukan mutlak dan unsur-unsur yang agak kedudukannya, dengan itu mencapai kesan oklusi elemen yang berbeza.

Berikut ialah kod sampel untuk elemen berkedudukan mutlak dan elemen berkedudukan agak wujud bersama:

<!DOCTYPE html>
<html>
<head>
    <style>
        #box1 {
            position: relative;
            top: 20px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        #box2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box1"><!-- 相对定位元素 -->
        <div id="box2"></div><!-- 绝对定位元素 -->
    </div>
</body>
</html>

Dalam contoh di atas, box1 ialah elemen berkedudukan agak, yang digerakkan ke bawah 20px dan ke kanan dengan menetapkan bahagian atas dan atribut kiri 50px. box2 ialah elemen yang diposisikan secara mutlak Dengan menetapkan atribut atas dan kanan, ia diletakkan di sudut kanan atas kotak1.

Melalui contoh kod sebenar, kita dapat memahami dengan lebih jelas perbezaan dan kaitan antara elemen kedudukan mutlak dan elemen kedudukan relatif. Dengan menguasai ciri dan penggunaan kedua-dua kaedah penentududukan ini, kami boleh susun atur dan reka bentuk halaman web dengan lebih fleksibel untuk mencapai kesan visual yang lebih baik.

Atas ialah kandungan terperinci Perbezaan dan perkaitan antara elemen berkedudukan mutlak dan elemen berkedudukan agak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html

Kenyataan：

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

Artikel sebelumnya：Punca biasa dan kaedah pencegahan untuk mengelakkan kegagalan kedudukan mutlakArtikel seterusnya：Punca biasa dan kaedah pencegahan untuk mengelakkan kegagalan kedudukan mutlak

Artikel berkaitan

Lihat lagi