Kedudukan CSS
Dalam CSS, atribut Position sering digunakan, terutamanya kedudukan mutlak dan kedudukan relatif Penggunaan mudah tidak menjadi masalah, terutamanya apabila bersarang, ia akan menjadi sedikit mengelirukan.
Atribut kedudukan: Menentukan jenis kedudukan elemen. Iaitu, elemen dipisahkan daripada susun atur aliran dokumen dan dipaparkan di mana-mana pada halaman.
nilai atribut kedudukan:
mutlak: Hasilkan elemen berkedudukan mutlak, berbanding dengan elemen pertama selain daripada kedudukan statik elemen induk untuk kedudukan. Kedudukan elemen ditentukan melalui atribut "kiri", "atas", "kanan" dan "bawah".
relatif: Menghasilkan elemen yang agak berkedudukan, diposisikan berbanding dengan kedudukan normalnya. Oleh itu, "kiri:20" menambah 20 piksel pada kedudukan KIRI elemen.
ditetapkan: Menghasilkan elemen berkedudukan mutlak, diposisikan berbanding tetingkap penyemak imbas.
statik: Nilai lalai. Tanpa kedudukan, elemen muncul dalam aliran biasa (mengabaikan pengisytiharan atas, bawah, kiri, kanan atau indeks-z). Kedudukan elemen ditentukan melalui atribut "kiri", "atas", "kanan" dan "bawah".
warisi: Menentukan bahawa nilai atribut kedudukan harus diwarisi daripada elemen induk.
Dua kaedah yang paling biasa digunakan ialah mutlak dan relatif.
atribut tambahan kedudukan:
①kiri: Menunjukkan bilangan piksel untuk dimasukkan ke kiri elemen , berapa banyak piksel untuk mengalihkan elemen ke kanan.
②kanan: Menunjukkan bilangan piksel untuk dimasukkan ke sebelah kanan elemen dan bilangan piksel untuk mengalihkan elemen ke kiri.
③atas: Menunjukkan bilangan piksel untuk dimasukkan di atas elemen dan bilangan piksel untuk memindahkan elemen ke bawah.
④bawah: Menunjukkan bilangan piksel untuk dimasukkan di bawah elemen dan bilangan piksel untuk mengalihkan elemen ke atas.
Nilai atribut di atas boleh menjadi negatif, unit: px.
Kedudukan mutlak
Kedudukan mutlak ; Susun atur dipisahkan daripada aliran dokumen, dan ruang yang tinggal diisi oleh elemen berikutnya. Kedudukan permulaan kedudukan ialah elemen induk terdekat (jawatan tidak statik), jika tidak, ia adalah dokumen Badan itu sendiri.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Nota: Kami mendapati bahawa kerana kami meletakkan Sub1 secara mutlak, kedudukan Sub1 telah diimbangi, manakala adik beradik Div Sub2, menduduki jawatan Sub1, dan Sub1 blok Sub2.
Kedudukan relatif relatif
kedudukan relatif tidak terlepas daripada reka letak aliran dokumen, Sahaja menukar kedudukannya sendiri, meninggalkan ruang kosong dalam kedudukan asal aliran dokumen. Kedudukan permulaan kedudukan ialah kedudukan asal elemen ini dalam aliran dokumen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Nota: Kami akan mendapati bahawa Sub1 diimbangi, yang tidak menjejaskan kedudukan Sub2, dan pada masa yang sama meliputi Sub2. Ingat bahawa offset tidak relatif kepada Div Ibu bapa, tetapi Berbanding dengan kedudukan asal Sub1.
Kedudukan tetap
Kedudukan tetap sama dengan mutlak, tetapi tidak berubah kedudukan apabila bar skrol bergerak.
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>Nota: Anda akan mendapati Sub2 sentiasa diposisikan dengan badan.
