Rumah > Artikel > hujung hadapan web > Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS
Analisis dan pemahaman mendalam tentang butiran kedudukan dan susun atur dalam CSS
- WBOYasal
- 2021-12-22 18:32:081717semak imbas
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!