Rumah >hujung hadapan web >tutorial css >css apakah itu kedudukan relatif
css apakah itu kedudukan relatif
- WBOYasal
- 2024-02-23 11:39:041120semak imbas
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!