Kedudukan relatif

Tetapkan atribut

elemen ke position, dan susun aturnya adalah sama dengan elemen relative. Kotak yang diberikan kemudian bergerak secara menegak berdasarkan atribut static atau top, dan/atau secara mendatar berdasarkan atribut bottom atau left. Ciri -ciri right, top, right, bottom dan left digunakan untuk menentukan jarak kotak bergerak selepas rendering. Nilai positif menunjukkan bahawa kotak akan bergerak dari kedudukan itu dan ke arah yang bertentangan. Sebagai contoh, left: 20px gerakkan kotak ke kanan dengan 20 piksel. Memohon nilai negatif ke arah yang bertentangan akan mencapai kesan yang sama: right: -20px akan mempunyai kesan yang sama seperti left: 20px. Nilai awal sifat -sifat ini adalah auto, yang menjadikan nilai yang dikira 0 (sifar) - iaitu, tiada pergerakan berlaku. Jelas sekali, tidak masuk akal untuk menentukan left dan right untuk elemen yang sama, kerana kedudukannya akan ditolak. Jika arah kandungan dari kiri ke kanan, nilai left digunakan, dan right akan diabaikan. Di sebelah kanan ke arah kiri, nilai right "menang". Jika kedua -dua top dan bottom ditentukan, top digunakan, dan bottom akan diabaikan. Oleh kerana hanya kotak yang diberikan bergerak apabila relatif kepada unsur -unsur kedudukan, skim kedudukan ini tidak praktikal untuk meletakkan lajur kandungan. Kedudukan relatif sering digunakan dalam kes -kes di mana kotak perlu dipindahkan beberapa piksel, walaupun ia juga boleh digunakan bersamaan dengan margin negatif pada unsur -unsur terapung untuk beberapa susun atur yang lebih kompleks.

Kawalan mengandungi blok

Satu kesan sampingan kedudukan relatif sangat mudah: elemen kedudukan relatif adalah "setempat", yang bermaksud ia menjadi blok kemasukan bagi mana -mana keturunan kedudukan mutlak. Ini memberi kita alat yang mudah digunakan untuk mengawal di mana blok dimasukkan: hanya set position ke relative tanpa memindahkan kotak itu sendiri.

FAQs pada kedudukan relatif CSS

Apakah perbezaan antara kedudukan relatif dan kedudukan mutlak CSS?

Dalam CSS, atribut position digunakan untuk menentukan jenis kaedah kedudukan unsur. Terdapat lima nilai yang berbeza dari position: static, relative, fixed, absolute, sticky, dan

. Kedudukan relatif dan kedudukan mutlak adalah dua kaedah yang paling biasa digunakan.

top Kedudukan relatif merujuk kepada kedudukan elemen berbanding kedudukan normalnya. Ini bermakna menetapkan sifat right, bottom, left, dan

menyebabkan unsur bergerak dari kedudukan normalnya. Walau bagaimanapun, unsur -unsur lain tidak akan menyesuaikan agar sesuai dengan jurang yang ditinggalkan oleh unsur -unsur.

Sebaliknya, kedudukan mutlak membolehkan unsur -unsur diposisikan berbanding dengan nenek moyang yang terdekat. Jika elemen yang benar -benar diposisikan tidak mempunyai nenek moyang yang diposisikan, ia akan menggunakan badan dokumen dan bergerak sebagai skrol halaman.

Bagaimanakah atribut Z-indeks berfungsi dengan kedudukan relatif?

Atribut

dalam z-index CSS mengawal urutan penumpukan menegak elemen bertindih. Oleh itu, ia boleh digunakan dengan kedudukan relatif untuk mengawal urutan paparan elemen bertindih. Atribut z-index hanya terpakai kepada unsur -unsur yang diposisikan (position: absolute, position: relative, position: fixed atau position: sticky).

unsur -unsur dengan nilai yang lebih tinggi z-index akan dipaparkan sebelum unsur -unsur dengan nilai z-index yang lebih rendah. Jika z-index tidak ditentukan, unsur -unsur disusun mengikut urutan yang mereka tunjukkan dalam dokumen HTML.

Bolehkah saya menggunakan nilai peratusan sebagai sifat atas, kanan, bawah dan kiri dalam kedudukan relatif?

Ya, anda boleh menggunakan nilai peratusan sebagai top, right, bottom, dan left sifat dalam kedudukan relatif. Apabila anda menggunakan nilai peratusan, ia adalah relatif kepada saiz elemen yang mengandungi blok. Sebagai contoh, jika anda menetapkan top: 50%, ia akan menggerakkan elemen ke bawah separuh daripada ketinggian blok yang mengandunginya.

Apa yang berlaku jika saya menentukan hanya satu arah (mis. Atas atau kiri) untuk kedudukan relatif?

Jika anda menentukan hanya satu arah (contohnya top atau left) untuk kedudukan relatif, elemen akan bergerak dari arah itu mengikut nilai yang ditentukan. Bahagian lain ( atau right) tidak akan terjejas dan elemen tidak akan bergerak dari sisi itu. bottom

Bolehkah saya menggunakan kedudukan relatif dengan paparan: flex atau paparan: grid?

Ya, anda boleh menggunakan kedudukan relatif dengan

atau display: flex. Atribut display: grid adalah bebas daripada atribut position, jadi anda boleh menggunakan sebarang kaedah kedudukan dengan mana -mana jenis paparan. Walau bagaimanapun, ingat bahawa beberapa kombinasi mungkin tidak mendapat hasil yang diharapkan kerana cara sifat -sifat ini berinteraksi. display

Bagaimanakah kedudukan relatif mempengaruhi proses dokumen?

Kedudukan relatif tidak mengeluarkan elemen dari aliran dokumen biasa. Sebaliknya, ia mengubah kedudukan elemen tanpa mengubah susun atur sekitarnya. Ini bermakna ruang elemen kekal dalam susun atur seolah -olah ia berada dalam kedudukan normalnya.

Bolehkah saya menggunakan nilai negatif sebagai sifat atas, kanan, bawah dan kiri dalam kedudukan relatif?

Ya, anda boleh menggunakan nilai negatif sebagai

, top, right, dan bottom sifat dalam kedudukan relatif. Nilai negatif akan menggerakkan elemen ke arah yang bertentangan. Sebagai contoh, jika anda menetapkan left, ia akan memindahkan elemen sebanyak 20 piksel. top: -20px

Apakah tujuan kedudukan relatif dalam CSS?

Kedudukan relatif dalam CSS digunakan apabila anda ingin menyesuaikan kedudukan elemen tanpa menjejaskan susun atur unsur -unsur lain. Ia juga berguna apabila anda ingin membuat konteks untuk unsur -unsur kanak -kanak yang benar -benar diposisikan.

Bagaimanakah kedudukan relatif berinteraksi dengan sifat CSS lain seperti margin, padding, dan sempadan?

margin, padding dan sifat mempengaruhi saiz elemen dan ruang sekitarnya. Ciri -ciri ini berfungsi dengan cara yang sama seperti kedudukan relatif berfungsi dengan cara yang sama seperti proses biasa. Sifat -sifat yang agak diposisikan border, top, right, dan bottom akan memindahkan unsur -unsur dari kedudukan normal mereka, tetapi mereka tidak akan menjejaskan saiz elemen atau ruang di sekelilingnya. left

Bolehkah saya menghidupkan sifat atas, kanan, bawah dan kiri elemen kedudukan relatif?

Ya, anda boleh menggunakan peralihan CSS atau animasi untuk menghidupkan sifat

, top, right, dan bottom sifat -sifat unsur -unsur kedudukan relatif. Ini boleh membuat pelbagai kesan, seperti elemen yang meluncur dari luar skrin atau bergerak pada halaman. left

Atas ialah kandungan terperinci Kedudukan relatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!