Kedudukan relatif CSS bermakna sesuatu elemen diposisikan secara relatif kepada kedudukan asalnya, dan kedudukan yang dialihkan tidak akan menjejaskan susun atur elemen lain.
Ciri penentududukan relatif ialah elemen masih menduduki ruang asal tanpa melepaskan diri daripada aliran dokumen atau menjejaskan susun atur elemen lain. Kedudukannya dikira secara relatif kepada elemen itu sendiri, dan kedudukan elemen boleh ditentukan melalui atribut atas, kanan, bawah dan kiri.
Berikut ialah contoh kod khusus:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: relative;
width: 100px;
height: 100px;
background-color: red;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>Dalam contoh di atas, kami mencipta bekas dengan lebar 300px dan ketinggian 300px, dengan warna latar belakang kelabu muda. Kemudian kotak dengan lebar 100px dan ketinggian 100px dibuat di dalam bekas, dengan warna latar belakang merah. Dengan menambah kedudukan: atribut relatif pada kotak, kami menetapkan kotak kepada kedudukan relatif.
Seterusnya, kami mengalihkan kotak 50px ke bawah dan ke kanan menggunakan bahagian atas: 50px dan kiri: sifat 50px. Ini menggerakkan kotak ke bawah dan ke kanan berbanding kedudukan asalnya.
Perlu diingatkan bahawa pergerakan kedudukan relatif adalah relatif kepada elemen itu sendiri, jadi walaupun kotak itu telah bergerak, ia masih menduduki kedudukan asal. Elemen lain tidak akan terjejas dan tiada perubahan reka letak akan berlaku.
Ringkasnya, kedudukan relatif ialah cara meletakkan kedudukan berbanding kedudukan asalnya Kedudukan yang dialihkan tidak akan menjejaskan reka letak elemen lain. Kedudukan elemen boleh dikawal melalui atribut atas, kanan, bawah dan kiri.
Atas ialah kandungan terperinci css apakah itu kedudukan relatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Cara menyemak plagiarisme pada CNKI Langkah terperinci untuk menyemak plagiarisme pada CNKI
Gambar rajah topologi rangkaian
Apakah parameter marquee?
Buku a5 dan b5
apakah julat python
penggunaan arahan kepala
Bagaimana untuk menyelesaikan synrax yang tidak sah
Bagaimana untuk menjadikan latar belakang telus dalam ps
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
