Kedudukan CSS
Atribut Kedudukan Kedudukan CSS
Artikel ini terutamanya memperkenalkan atribut Kedudukan elemen ini boleh menetapkan kaedah kedudukan elemen pada muka surat.
Jadual Kandungan
1. Pengenalan kepada kedudukan: Memperkenalkan nilai dan sifat bantu kedudukan.
2. Kaedah kedudukan kedudukan: Memperkenalkan empat kaedah kedudukan kedudukan: mutlak, relatif, tetap dan lalai.
3. Kedudukan ringkasan: Tunjukkan kedudukan sebagai contoh.
1. Pengenalan
1.1 Penerangan
Atribut kedudukan: menentukan jenis kedudukan elemen. Iaitu, elemen dipisahkan daripada susun atur aliran dokumen dan dipaparkan di mana-mana pada halaman.
1.2 Nilai utama
①mutlak: kedudukan mutlak di luar susun atur aliran dokumen, 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.
②relatif: Kedudukan relatif; tidak berpisah daripada susun atur aliran dokumen, hanya menukar kedudukannya sendiri, meninggalkan kawasan kosong dalam kedudukan asal aliran dokumen. Kedudukan permulaan kedudukan ialah kedudukan asal elemen ini dalam aliran dokumen.
③ditetapkan: Kedudukan tetap; serupa dengan mutlak, tetapi tidak berubah kedudukan apabila bar skrol bergerak.
④statik: Nilai lalai;
1.3 Atribut tambahan
Atribut kedudukan hanya mengeluarkan elemen daripada aliran dokumen Jika anda mahu elemen ini dipaparkan dalam kedudukan yang dikehendaki, anda perlu menggunakan atribut berikut (kedudukan :static tidak menyokong ini):
①kiri: Menunjukkan bilangan piksel untuk dimasukkan ke kiri elemen dan bilangan 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 di luar susun atur aliran dokumen, ruang yang tinggal diisi oleh elemen seterusnya. Kedudukan permulaan kedudukan ialah elemen induk terdekat (jawatan tidak statik), jika tidak, ia adalah dokumen Badan itu sendiri. position:relative
position:relative
Relative positioning tidak terlepas daripada susun atur aliran dokumen, hanya menukar kedudukannya sendiri, meninggalkan kawasan kosong di dalamnya kedudukan asal aliran dokumen. Kedudukan permulaan kedudukan ialah kedudukan asal elemen ini dalam aliran dokumen.
kedudukan:tetap
Kedudukan tetap; serupa dengan mutlak, tetapi tidak berubah kedudukan apabila bar skrol bergerak.
Aplikasi praktikal:
①Tindan kotak log masuk: seperti log masuk forum dz.
②Iklan mesej QQ palsu.
kedudukan:statik
Kedudukan lalai bermakna elemen ini ialah kaedah kedudukan lalai.
Aplikasi praktikal:
Pemprosesan khas untuk IE6.
Sama ada bar skrol muncul
Apabila elemen yang mengandungi atribut kedudukan ialah elemen tepi:
①mutlak dan relatif: mengandungi dua nilai ini Untuk elemen tepi, bar skrol akan muncul apabila penyemak imbas dizum keluar supaya elemen ini tidak kelihatan.
②dibetulkan: Untuk elemen tepi yang mengandungi nilai ini, apabila penyemak imbas dizum keluar ke titik di mana elemen ini tidak kelihatan, bar skrol tidak akan muncul.
<html>
<head>
<meta charset="utf-8">
<title>position</title>
<style type="text/css">
div
{
height: 200px;
width: 300px;
border-color: Black;
border-style: solid;
border-width: 1px;
}
#a
{
position:absolute;
left:900px;
top:150px;
}
#b
{
position:relative;
left:500px;
top:100px;
}
#c
{
position:fixed;
left:970px;
top:400px;
}
#d
{
position:static;
background-color:Window;
}
</style>
</head>
<body>
<div id="a" >
div-a<br />
position:absolute;<br />
绝对定位；脱离文档流，遗留空间由后续元素填充。
</div>
<div id="b" >
div-b<br />
position:relative;<br />
相对定位；不脱离文档流，只改变自身的位置，在文档流原先的位置遗留空白区域。
</div>
<div id="c" >
div-c<br />
position:fixed;<br />
固定定位；固定在页面中，不随浏览器的大小改变而改变位置。
</div>
<div id="d">默认定位方式</div>
<input type="text" value="input1" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
bahagian seterusnya