Atribut kedudukan digunakan untuk meletakkan elemen. iaitu yang berikut ialah elemen berkedudukan -
statik - kotak elemen dibentangkan sebagai sebahagian daripada aliran dokumen biasa, seperti berikut elemen sebelum dan elemen selepas sebelumnya.
relatif - Kotak elemen dibentangkan sebagai sebahagian daripada aliran biasa dan kemudian diimbangi oleh beberapa jarak.
Mutlak - Kotak elemen dibentangkan berbanding blok yang mengandunginya dan dialih keluar sepenuhnya daripada aliran biasa dokumen.
Tetap - Kotak elemen diletakkan secara mutlak, dengan semua gelagat diterangkan untuk kedudukan: mutlak.
Berikut ialah kod untuk meletakkan elemen menggunakan CSS -
Demonstrasi Langsung
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
color: white;
text-align: center;
height: 100px;
width: 100px;
}
.static {
position: static;
background-color: greenyellow;
}
.relative {
position: relative;
left: 50px;
background-color: rgb(255, 47, 47);
}
.absolute {
position: absolute;
right: 50px;
top: 20px;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>Kod di atas akan menghasilkan output berikut -
Atas ialah kandungan terperinci Elemen kedudukan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Pemacu kad bunyi komputer riba
Penjelasan terperinci tentang penggunaan fungsi substr oracle
Perbezaan antara css3.0 dan css2.0
Cara menggunakan anotasi notnull
Bagaimana untuk membeli syiling Ripple sebenar
Kaedah analisis data
penggunaan kursor oracle
Bagaimana untuk menyambung ke pangkalan data dengan sqlplus
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
