hujung hadapan webtutorial cssMemahami dan menggunakan sifat asas dan penggunaan elemen kedudukan mutlakMemahami dan menggunakan sifat asas dan penggunaan elemen kedudukan mutlak
Untuk menguasai sifat asas dan penggunaan elemen kedudukan mutlak, contoh kod khusus diperlukan
Dalam reka bentuk dan pembangunan web, kedudukan mutlak ialah kaedah reka letak yang biasa dan biasa digunakan. Dengan kedudukan mutlak, kita boleh meletakkan elemen tepat pada lokasi yang ditentukan tanpa dipengaruhi oleh elemen lain. Menguasai sifat asas dan penggunaan elemen kedudukan mutlak boleh membantu kami mengawal dan susun atur halaman web dengan lebih baik. Artikel ini akan memperkenalkan sifat asas dan penggunaan elemen yang diposisikan secara mutlak, dan memberikan contoh kod khusus.
Dalam CSS, anda menentukan cara sesuatu elemen diletakkan dengan menggunakan atribut kedudukan. Kedudukan mutlak adalah salah satu kaedah, yang dicapai dengan menetapkan nilai atribut kedudukan kepada mutlak. Elemen yang diposisikan secara mutlak dikeluarkan daripada aliran dokumen dan diposisikan secara relatif kepada elemen induk kedudukan terdekatnya. Jika tiada elemen induk yang diposisikan, elemen tersebut akan diposisikan secara relatif kepada elemen badan.
Elemen yang diposisikan secara mutlak mempunyai sifat asas berikut:
- atas: Menentukan jarak elemen berbanding bahagian atas elemen induk.
- kanan: Menentukan jarak elemen berbanding sebelah kanan elemen induk.
- bawah: Menentukan jarak elemen berbanding bahagian bawah elemen induk.
- kiri: Menentukan jarak elemen berbanding sebelah kiri elemen induk.
Dengan menetapkan nilai atribut atas, kanan, bawah dan kiri, kita boleh mengawal kedudukan elemen dengan tepat. Nilai ini boleh menjadi nilai piksel tertentu atau nilai peratusan. Di bawah ialah kod sampel ringkas yang menunjukkan cara menggunakan atribut kedudukan mutlak.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 300px;
height: 200px;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>Dalam kod contoh di atas, kami mencipta elemen bekas .bekas dan menetapkan lebar dan ketinggiannya. Kami kemudiannya mencipta elemen .box di dalam .container dan meletakkannya sebagai elemen dengan kedudukan mutlak. Dengan menetapkan nilai atribut atas dan kiri, kami meletakkan elemen .box di dalam elemen .container, 50 piksel dari bahagian atas dan kiri elemen induk.
Selain atribut kedudukan asas, elemen kedudukan mutlak juga boleh menggunakan atribut indeks-z untuk mengawal susunan susunan elemen. Nilai atribut indeks-z boleh positif, negatif atau 0. Semakin besar nilai indeks-z sesuatu elemen, semakin tinggi ia akan muncul pada lapisan atas. Berikut ialah kod sampel konkrit yang menunjukkan cara menggunakan atribut indeks-z:
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 150px;
left: 150px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>Dalam kod sampel di atas, kami telah mencipta dua elemen kotak .box1 dan .box2 dengan nilai indeks-z yang berbeza. Memandangkan .box2 mempunyai nilai indeks-z yang lebih besar, ia akan muncul di atas .box1, sekali gus meliputi sebahagian daripada .box1.
Sifat asas dan penggunaan elemen kedudukan mutlak adalah seperti yang dinyatakan di atas. Dengan menguasai sifat dan penggunaan ini, kami boleh mengawal dan susun atur halaman web dengan lebih baik. Pada masa yang sama, kami juga boleh menggabungkan sifat dan teknik CSS lain untuk mengembangkan dan mengoptimumkan lagi reka letak dan reka bentuk halaman web. Semoga contoh kod dan arahan yang disediakan dalam artikel ini akan membantu pembaca lebih memahami dan menggunakan kedudukan mutlak.
Atas ialah kandungan terperinci Memahami dan menggunakan sifat asas dan penggunaan elemen kedudukan mutlak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Draggin ' dan Droppin ' dalam ReactApr 17, 2025 am 11:52 AMEkosistem React menawarkan kita banyak perpustakaan yang semuanya memberi tumpuan kepada interaksi seret dan penurunan. Kami mempunyai React-Dnd, React-Beautiful-Dnd,
Perisian CepatApr 17, 2025 am 11:49 AMTerdapat beberapa perkara yang saling berkaitan dengan perisian cepat sejak kebelakangan ini.
Kecerunan bersarang dengan klip latar belakangApr 17, 2025 am 11:47 AMSaya tidak boleh mengatakan saya menggunakan klip latar belakang semua yang kerap. Saya ' Tetapi saya diingatkan dalam jawatan oleh Stefan Judis,
Menggunakan RequestAnimationFrame dengan cangkuk ReactApr 17, 2025 am 11:46 AMAnimasi dengan RequestAnimationFrame semestinya mudah, tetapi jika anda belum membaca dokumentasi React dengan teliti maka anda mungkin akan mengalami beberapa perkara
Perlu tatal ke bahagian atas halaman?Apr 17, 2025 am 11:45 AMMungkin cara paling mudah untuk menawarkan kepada pengguna adalah pautan yang mensasarkan ID pada elemen. Begitu seperti ...
API terbaik (graphql) adalah salah satu yang anda tulisApr 17, 2025 am 11:36 AMDengar, saya bukan pakar GraphQL tetapi saya suka bekerja dengannya. Cara ia mendedahkan data kepada saya sebagai pemaju front-end cukup sejuk. Ia seperti menu
Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP BaruApr 17, 2025 am 11:26 AMPada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s
Pelbagai kaedah untuk mengembangkan kotak semasa memelihara jejari sempadanApr 17, 2025 am 11:19 AMSaya baru -baru ini melihat perubahan yang menarik pada Codepen: apabila melayang pena di laman web, ada persegi panjang dengan sudut bulat yang berkembang di belakang.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver Mac版
Alat pembangunan web visual
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
