Penjelasan terperinci tentang sifat kedudukan relatif CSS: kedudukan dan relatif-tutorial css-php.cn

Penjelasan terperinci tentang sifat kedudukan relatif CSS: kedudukan dan relatif

WBOY

Lepaskan： 2023-10-24 08:39:15

asal

1078 orang telah melayarinya

CSS 相对定位属性详解：position 和 relative

Penjelasan terperinci tentang sifat kedudukan relatif CSS: kedudukan dan relatif

Pengenalan:
Dalam CSS, kita selalunya perlu meletakkan elemen supaya ia dipaparkan pada lokasi tertentu pada halaman. Kedudukan atribut kedudukan relatif dan relatif ialah pasangan atribut yang biasa digunakan. Artikel ini akan memperkenalkan penggunaan dan kesan kedua-dua sifat ini secara terperinci dan memberikan contoh kod khusus.

1. Atribut kedudukan:
Atribut kedudukan digunakan terutamanya untuk menetapkan kaedah kedudukan elemen peringkat blok. Ia mempunyai nilai pilihan berikut:

statik: Nilai lalai, elemen dibentangkan mengikut aliran biasa.
relatif: Elemen diposisikan secara relatif kepada kedudukan asalnya.
mutlak: Elemen dipisahkan daripada aliran dokumen biasa dan diposisikan berbanding dengan blok yang mengandunginya.
ditetapkan: Elemen dipisahkan daripada aliran dokumen biasa dan diletakkan relatif kepada tetingkap penyemak imbas.
melekit: Elemen memaparkan kedudukan relatif semasa menatal, dan kedudukan statik sebaliknya.

2. Atribut relatif:
Atribut relatif boleh digunakan bersama dengan atribut kedudukan, yang digunakan untuk meletakkan elemen relatif kepada dirinya sendiri. Kedudukan relatif biasanya dilakukan secara relatif kepada kedudukan elemen dalam aliran dokumen biasa, tetapi kedudukan juga boleh diperhalusi dengan menetapkan sifat atas, bawah, kiri dan kanan.

Contoh kod khusus:
Berikut ialah halaman HTML ringkas, yang mengandungi elemen dengan kedudukan relatif:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 400px;
  height: 400px;
  background-color: #F2F2F2;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #FF0000;
  position: relative;
  top: 50px;
  left: 50px;
}
</style>
</head>
<body>
<div class="container">
  <div class="box"></div>
</div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta div bekas dengan lebar dan ketinggian 400px, dan tetapkan warna latar belakang Untuk #F2F2F2, tetapkan sifat kedudukannya kepada relatif untuk mencapai kedudukan relatif. Kemudian saya mencipta kotak persegi kecil dalam bekas dengan lebar dan ketinggian 100px dan warna latar belakang #FF0000 Saya juga menetapkan atribut kedudukannya kepada relatif, dan mengalihkannya ke bawah 50px dan ke kanan dengan menetapkan atribut atas dan kiri. masing-masing 50px.

Jalankan kod di atas, kita dapat melihat bahawa segi empat sama merah yang agak berkedudukan muncul pada halaman, dan kedudukannya dilaraskan berbanding bekas.

Kesimpulan:
Dengan menggunakan kedudukan atribut kedudukan relatif dan relatif, kita boleh meletakkan elemen dengan mudah. Artikel ini memperincikan konsep kedua-dua sifat ini dan menyediakan contoh kod khusus. Saya berharap pembaca dapat lebih memahami dan menguasai penggunaan dan kesan kedua-dua sifat ini melalui pengenalan artikel ini.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat kedudukan relatif CSS: kedudukan dan relatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!