Apakah Nilai Lalai untuk Sifat `kedudukan: mutlak` dan Mengapa Ia Menyebabkan Penyelewengan?-tutorial css-php.cn

Apakah Nilai Lalai untuk Sifat `kedudukan: mutlak` dan Mengapa Ia Menyebabkan Penyelewengan?

Barbara Streisand

Lepaskan： 2024-11-07 09:43:02

asal

678 orang telah melayarinya

What are the Default Values for `position: absolute` Properties and Why Do They Cause Misalignment?

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!