Rumah > Artikel > hujung hadapan web > Apakah Nilai Lalai untuk Sifat `kedudukan: mutlak` dan Mengapa Ia Menyebabkan Penyelewengan?
Apakah Nilai Lalai untuk Sifat `kedudukan: mutlak` dan Mengapa Ia Menyebabkan Penyelewengan?
- Barbara Streisandasal
- 2024-11-07 09:43:02657semak imbas
Nilai Lalai untuk Kedudukan: Mutlak dalam Penyelewengan Tidak Dijangka
Dalam projek pembangunan web, pembangun kadangkala menghadapi masalah dengan salah jajaran elemen semasa menggunakan kedudukan mutlak. Sebagai penyelesaian, menetapkan kedudukan: mutlak tanpa parameter eksplisit kadangkala menyelesaikan masalah. Ini menimbulkan persoalan tentang nilai lalai untuk parameter ini.
Walaupun kedudukan mutlak secara konseptual meletakkan elemen berhubung dengan blok yang mengandunginya, nilai lalai untuk sifat atas, kiri, bawah dan kanan tidak intuitif. Bertentangan dengan jangkaan, ia tidak ditetapkan kepada 0.
Seperti yang dinyatakan dalam spesifikasi Tahap 3 Kumpulan Kerja CSS, nilai lalai untuk semua sifat ini ialah automatik. Ini bermakna elemen kekal dalam kedudukan statiknya, seolah-olah ia tidak diletakkan secara mutlak.
Sebagai contoh, pertimbangkan kod berikut:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
position:absolute;
}
</style>
</head>
<body>
<h1>Absolute pos</h1>
<p>Paragraph</p>
</body>
</html>
Tanpa sebarang kedudukan yang jelas, elemen h1 kekal dalam kedudukan asalnya:
[Imej elemen h1 diletakkan di sudut kiri atas reka letak]
kedudukan elemen yang diposisikan secara mutlak ditentukan oleh kekangan berikut:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
Jika ketiga-tiga 'kiri', 'lebar' dan 'kanan' ialah 'auto', nilai 'kiri' ditetapkan kepada kedudukan statik. Begitu juga, kedudukan menegak dikekang oleh:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
Jika ketiga-tiga 'atas', 'tinggi' dan 'bawah' adalah 'auto', nilai 'atas' ditetapkan kepada kedudukan statik .
Kesimpulannya, apabila menggunakan kedudukan mutlak tanpa nilai eksplisit, elemen akan kekal dalam kedudukan statiknya. Tingkah laku ini mungkin kelihatan tidak dijangka tetapi didokumenkan dalam spesifikasi CSS. Memahami nilai lalai ini membantu mengelakkan isu salah jajaran dan menggalakkan kedudukan yang tepat dalam reka letak web yang kompleks.
Atas ialah kandungan terperinci Apakah Nilai Lalai untuk Sifat `kedudukan: mutlak` dan Mengapa Ia Menyebabkan Penyelewengan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!