hujung hadapan web
tutorial css
Memahami dan menggunakan sifat asas dan penggunaan elemen kedudukan mutlak
Memahami 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!
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
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Adakah kedudukan melekit terlepas daripada aliran dokumen?
Feb 20, 2024 pm 05:24 PM
Adakah kedudukan melekit menjauhkan diri daripada aliran dokumen Contoh kod khusus diperlukan dalam pembangunan web, reka letak adalah topik yang sangat penting. Antaranya, positioning merupakan salah satu teknik susun atur yang biasa digunakan. Dalam CSS, terdapat tiga kaedah penentududukan biasa: kedudukan statik, kedudukan relatif dan kedudukan mutlak. Selain ketiga-tiga kaedah penentududukan ini, terdapat juga kaedah penentududukan yang lebih istimewa iaitu pelekatan kedudukan. Jadi, adakah kedudukan melekit terlepas daripada aliran dokumen? Mari bincangkannya secara terperinci di bawah dan berikan beberapa contoh kod untuk membantu memahami. Pertama, kita perlu memahami apa itu aliran dokumen
Bagaimana untuk meletakkan imej di tengah dengan css
Apr 25, 2024 am 11:51 AM
Terdapat tiga cara utama untuk memusatkan imej dalam CSS: menggunakan paparan: blok dan margin: 0 auto;. Gunakan susun atur kotak flex atau susun atur grid dan tetapkan item jajar atau justify-kandungan ke tengah. Gunakan kedudukan mutlak, set atas dan kiri kepada 50%, dan gunakan transformasi: terjemah(-50%, -50%);.
Bagaimana untuk meletakkan elemen dalam css
Apr 26, 2024 am 10:24 AM
Terdapat empat kaedah penentududukan elemen CSS: kedudukan statik, relatif, mutlak dan tetap. Kedudukan statik adalah lalai dan elemen tidak dipengaruhi oleh peraturan kedudukan. Kedudukan relatif menggerakkan elemen relatif kepada dirinya sendiri tanpa menjejaskan aliran dokumen. Kedudukan mutlak mengalih keluar elemen daripada aliran dokumen dan meletakkannya secara relatif kepada unsur nenek moyangnya. Kedudukan tetap meletakkan elemen berbanding dengan port pandangan, sentiasa mengekalkannya dalam kedudukan yang sama pada skrin.
sintaks atribut bawah dalam CSS
Feb 21, 2024 pm 03:30 PM
Contoh sintaks atribut dan kod bawah dalam CSS Dalam CSS, atribut bawah digunakan untuk menentukan jarak antara elemen dan bahagian bawah bekas. Ia mengawal kedudukan elemen berbanding bahagian bawah elemen induknya. Sintaks atribut bawah adalah seperti berikut: elemen{bottom:value;} dengan elemen mewakili elemen yang gaya akan digunakan dan nilai mewakili nilai bawah yang akan ditetapkan. nilai boleh menjadi nilai panjang tertentu, seperti piksel
Bagaimana untuk memusatkan kotak dalam html5
Apr 05, 2024 pm 12:27 PM
Untuk memusatkan kotak dalam HTML5, terdapat kaedah berikut: pemusatan mendatar: text-align: centermargin: autodisplay: flex; kedudukan: mutlak;
Apakah susun atur susun atur?
Feb 24, 2024 pm 03:03 PM
Susun atur merujuk kepada kaedah penetapan taip yang diguna pakai dalam reka bentuk web untuk menyusun dan memaparkan elemen halaman web mengikut peraturan dan struktur tertentu. Melalui reka letak yang munasabah, halaman web boleh dibuat lebih cantik dan kemas, dan mencapai pengalaman pengguna yang baik. Dalam pembangunan bahagian hadapan, terdapat banyak kaedah susun atur untuk dipilih, seperti susun atur meja tradisional, susun atur terapung, susun atur kedudukan, dll. Walau bagaimanapun, dengan promosi HTML5 dan CSS3, teknologi susun atur responsif moden, seperti susun atur Flexbox dan susun atur Grid, telah menjadi
Melihat dengan lebih dekat kelebihan dan batasan kedudukan mutlak
Jan 23, 2024 am 10:20 AM
Penentududukan Mutlak (AbsolutePositioning) ialah kaedah penentududukan yang biasa digunakan dalam CSS Ia melaksanakan susun atur dengan menentukan kedudukan mengimbangi elemen berbanding dengan elemen nenek moyang kedudukan terdekatnya. Apabila menggunakan kedudukan mutlak, kita perlu memahami kelebihan dan batasannya, dan menggunakan contoh kod konkrit untuk mendalami pemahaman kita. Pertama sekali, salah satu kelebihan kedudukan mutlak ialah anda mempunyai kawalan penuh ke atas kedudukan elemen anda. Berbanding dengan kaedah susun atur lain, kedudukan mutlak boleh meletakkan elemen dengan tepat di mana-mana pada halaman tanpa dihadkan oleh dokumen.
Bagaimana untuk melaraskan kedudukan komponen dalam bootstrap
Apr 05, 2024 am 03:00 AM
Bootstrap menyediakan pelbagai cara untuk melaraskan kedudukan komponen: Kelas ofset: Komponen offset secara mendatar. Kelas tambahan: laraskan penjajaran komponen. Sistem grid: Mengawal bilangan lajur yang diduduki komponen dalam grid. Elemen sebaris: Buat reka letak terapung. Kedudukan mutlak: Mengalihkan komponen keluar daripada aliran biasa dan meletakkannya di mana-mana pada halaman.
