hujung hadapan webtutorial cssAnalisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSSAnalisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS
Artikel ini membawakan anda pengetahuan yang berkaitan tentang reka letak kedudukan CSS Mari kita lihat apakah kedudukan relatif, kedudukan mutlak dan kedudukan tetap, sifat dan kegunaan elemen yang berbeza, dsb. Kami berharap ia dapat membantu semua orang.
1. Kedudukan relatif
1.1) Apakah itu kedudukan relatif
Kedudukan relatif: Kotak boleh diletakkan mengikut kedudukan asalnya (Dicapai melalui deskriptor kedudukan).
Deskriptor kedudukan:
kiri: bergerak ke kanan; atas bergerak ke bawah; , Bergerak ke arah bertentangan)
Asal:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
width: 500px;
height: 500px;
border: 1px solid #000;
margin: 50px auto;
}
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;
}
</style></head><body>
<p>
<p></p>
</p></body></html>
Tetapkan p kepada kedudukan relatif:
p {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;}
Sifat
- Elemen kedudukan relatif , pada asasnya masih dalam kedudukan asal, tetapi dipaparkan di tempat baharu, tanpa menjejaskan elemen lain halaman.
Tujuan
- Digunakan untuk memperhalusi kedudukan elemen
- Kotak yang mempunyai kedudukan relatif boleh digunakan sebagai kotak rujukan untuk kedudukan mutlak
nbsp;html>
<meta>
<meta>
<meta>
<title>相对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
nav {
width: 780px;
height: 50px;
margin: 40px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
width: 156px;
height: 50px;
line-height: 50px;
text-align: center;
}
nav ul li a {
display: block;
width: 156px;
height: 50px;
background-color: lightcyan;
color: #000;
text-decoration: none;
}
nav ul li a:hover {
border-top: 3px solid red;
}
</style>
<nav>
<ul>
<li>
<a>导航一</a>
</li>
<li>
<a>导航二</a>
</li>
<li>
<a>导航三</a>
</li>
<li>
<a>导航四</a>
</li>
<li>
<a>导航五</a>
</li>
</ul>
</nav>Kesan pada masa ini adalah seperti ini: 
Anda akan mendapati bahawa apabila tetikus melayang di atas, kawasan navigasi akan Tenggelam
Selepas kami menetapkan kedudukan relatif untuknya dan memperhalusinya:
nav ul li a:hover {
border-top: 3px solid red;
position: relative;
top: -3px;}
Ini akan menyelesaikan masalah tadi
2. Kedudukan mutlak 2.1) Apakah kedudukan mutlak Kedudukan mutlak: Kotak menerangkan kedudukannya dengan koordinat dan mempunyai kedudukan mutlaknya sendiri.
Kotak rujukan berkedudukan mutlak: Kotak berkedudukan mutlak akan menggunakan kotak terdekat dengan atribut kedudukan antara elemen moyangnya sebagai titik rujukan.
Kotak ini biasanya mempunyai kedudukan yang agak, jadi ia juga dipanggil "penampilan ayah anak".
Penerangan kedudukan: kiri: jarak ke kiri: jarak ke kanan: jarak ke atas; bahagian bawah
nbsp;html>
<meta>
<meta>
<meta>
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 500px;
height: 300px;
left: 200px;
top: 100px;
background-color: antiquewhite;
}
</style>
<p>
</p>2.2) Sifat dan penggunaan kedudukan mutlak
Kotak kedudukan mutlak berpusat menegak:
Tetapkan susunan susunan elemen yang diletakkan secara mutlak.box {
position: absolute;
top: 50%;
margin-top: -自己高度一半;} ialah integer positif tanpa unit Nilai yang lebih besar boleh menekan nilai yang lebih kecil (iaitu, nilai yang lebih besar dipaparkan pada lapisan atas) . Contohnya:
.box {
position: absolute;
left: 50%;
margin-left: -自己宽度一半;}
- Kesan pada masa ini adalah seperti berikut:
- Pada masa ini kami mahu box1 dipaparkan pada lapisan atas, jadi kami menetapkan atribut indeks-z.
Lihat kesannya:
nbsp;html>
<meta>
<meta>
<meta>
<title>绝对定位</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
background-color: antiquewhite;
}
.box2 {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
background-color: lightblue;
}
</style>
<p></p>
<p></p>Penggunaan<br/>boleh digunakan bersama dengan sprite CSS
dan boleh digabungkan dengan JS untuk melaksanakan beberapa animasi
.box1 {
width: 300px;
height: 300px;
position: absolute;
left: 100px;
top: 100px;
background-color: antiquewhite;
z-index: 100;}.box2 {
width: 300px;
height: 300px;
position: absolute;
left: 200px;
top: 200px;
background-color: lightblue;
z-index: 1;}3.1) Apakah kedudukan tetap 
Kedudukan tetap: Tidak kira bagaimana halaman menatal, ia akan sentiasa menjadikan halaman sebagai titik rujukan dan ditetapkan di sana.
- Penerangan kedudukan:
3.2) Sifat dan penggunaan kedudukan tetap
Kesannya adalah seperti berikut:
Apabila halaman pergi ke bahagian bawah, kedudukan butang kembali ke atas di sudut kanan bawah kekal tidak berubah.
Jika berminat, boleh terus layari:
.box {
position: fixed;
top: 100px;
left: 100px;}. Atas ialah kandungan terperinci Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Slider Multi-Thumb: Kes UmumApr 12, 2025 am 10:52 AMBahagian pertama siri dua bahagian ini terperinci bagaimana kita boleh mendapatkan slider dua thumb. Sekarang kita akan melihat kes multi-thumb umum, tetapi dengan yang berbeza dan
Carousel CSS sahajaApr 12, 2025 am 10:48 AMIa agak mengagumkan sejauh mana HTML dan CSS akan membawa anda ketika membina karusel/tayangan slaid.
Web pada tahun 2020: Extensibility dan InteroperabilityApr 12, 2025 am 10:46 AMDalam beberapa tahun kebelakangan ini, kami telah melihat banyak perubahan dan lencongan berkenaan dengan teknologi web. Pada tahun 2020, saya meramalkan kami sebagai komuniti web yang menuju ke arah
Komponen web dengan html yang berbeza untuk desktop dan mudah alihApr 12, 2025 am 10:43 AMChristian Schaefer mempunyai penulisan besar yang besar tentang berurusan dengan iklan web. Semuanya menarik, pertama mendokumentasikan semua cabaran yang
Fungsi warna terbaik dalam CSS?Apr 12, 2025 am 10:33 AMSaya ' telah berkata sebelum HSL adalah format warna terbaik yang kita ada. Kebanyakan kita tidak suka David Desandro, yang boleh membaca kod hex. HSL (a) adalah warna, ketepuan,
EdgiumApr 12, 2025 am 10:32 AM15 Januari, 2020 adalah hari Microsoft Edge pergi Chromium. Kejatuhan kepelbagaian enjin penyemak imbas. Ada hujah yang kuat untuk dibuat itu
'Semua perkara ini agak mudah dilakukan, mereka hanya memerlukan seseorang untuk duduk dan hanya melalui laman web'Apr 12, 2025 am 10:31 AMSaya melihat video yang disiarkan di Twitter dari Channel 5 News di UK (saya tidak tahu apa kredibiliti mereka, ia ' s lautan dari saya) dengan Anchor Claudia
Jamstack vs JamstackApr 12, 2025 am 10:30 AMIa hanya satu perkataan untuk membangkitkan idea yang melayani sebanyak yang anda boleh secara statistik semasa menggunakan kod klien dan memukul API tanpa pelayan untuk sebarang keperluan selepas itu.
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
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
SublimeText3 Linux versi baharu
SublimeText3 Linux versi terkini
EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod
