CSS Positioning (Positioning)
Positioning kadang-kadang sangat sulit!
Memutuskan untuk menunjukkan di depan elemen!
Elemen dapat tumpang tindih!
Positioning (positioning)
sifat CSS positioning memungkinkan Anda untuk mencari elemen. Hal ini juga dapat menjadi elemen dalam elemen lain di belakang, dan menentukan konten elemen terlalu besar, apa yang harus terjadi.
Elemen dapat digunakan di bagian atas, bawah, kiri dan atribut positioning yang tepat. Namun, sifat ini tidak akan bekerja kecuali milik posisi diatur pertama. Mereka juga memiliki cara yang berbeda kerja, tergantung pada metode penentuan posisi.
Ada empat metode penentuan posisi yang berbeda.
posisi statis
elemen HTML default, yang tidak terletak, unsur-unsur muncul dalam aliran normal.
elemen posisi statis tidak akan atas, bawah, kiri, pengaruh kanan.
Lokasi tetap
Posisi elemen relatif terhadap jendela browser adalah posisi tetap.
Bahkan ketika jendela bergulir tidak bergerak:
Catatan: posisi tetapdi IE7 dan IE8 deskripsi DOCTYPE perlu mendukung!
posisi tetap posisi elemen dokumen independen aliran, dan karena itu tidak menempati ruang.
elemen diposisikan tetap dan unsur-unsur lain tumpang tindih.
posisi relatif
elemen posisi relatif diposisikan relatif ke posisi normal.
contoh
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Coba »
Dapat dipindahkan posisi relatif elemen konten dan elemen yang tumpang tindih, tidak mengubah ruang asli diduduki.
elemen posisi relatif sering digunakan sebagai blok kontainer elemen benar-benar diposisikan.
posisi absolut
Posisi posisi absolut dari elemen relatif terhadap elemen induk diposisikan terdekat, jika unsur ini belum diposisikan elemen induk, posisi relatif terhadap <html>:
Benar-benar diposisikan sehingga posisi dari elemen dokumen independen aliran, dan karena itu tidak menempati ruang.
elemen benar-benar diposisikan dan elemen lainnya tumpang tindih.
unsur tumpang tindih
Orientasi dan independen dari elemen dokumen mengalir, sehingga mereka dapat menutupi elemen lain pada halaman
atribut z-index menentukan urutan susun dari elemen (elemen yang harus ditempatkan di depan atau di belakang)
Elemen dapat memiliki urutan tumpukan positif atau negatif:
Elemen memiliki urutan menumpuk tinggi selalu di depan urutan susun yang lebih rendah dari elemen.
Catatan: Jika dua elemen strategis tumpang tindih, tidak menentukan z yang - index, posisi akhir dari elemen dalam kode HTML akan ditampilkan di atas.
contoh yang lebih
Contoh ini menunjukkan bagaimana untuk mengatur bentuk elemen. Unsur ini dipotong menjadi bentuk ini, dan ditampilkan.
Cara menggunakan scroll bar untuk menampilkan isi dari elemen melimpah dalam
Contoh ini menunjukkan properti overflow untuk membuat scroll bar, ketika isi elemen di daerah yang ditunjuk terlalu besar, cara mengatur untuk mengakomodasi.
Cara mengatur browser untuk secara otomatis menangani luapan
Contoh ini menunjukkan bagaimana untuk mengatur browser untuk secara otomatis menangani meluap.
Contoh ini menunjukkan bagaimana untuk mengubah kursor.
Semua properti CSS positioning
"CSS" kolom menunjukkan jumlah yang CSS (CSS1 atau CSS2) versi definisi properti.
| milik | penjelasan | nilai | CSS |
|---|---|---|---|
| bagian bawah | Offset mendefinisikan batas antara elemen posisi yang lebih rendah di luar blok yang mengandung dari perbatasan bawah. | mobil panjangnya % mewarisi | 2 |
| klip | Klip sebuah elemen benar-benar diposisikan | bentuk mobil mewarisi | 2 |
| kursor | Memindahkan kursor untuk menampilkan jenis tertentu | url mobil crosshair kegagalan petunjuk bergerak e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize teks menunggu membantu | 2 |
| kiri | Mendefinisikan elemen penargetan margin kiri mengimbangi blok batas antara tepi kiri yang mengandung. | mobil panjangnya % mewarisi | 2 |
| melimpah | Ketika isi dari elemen mengatur apa yang terjadi ketika meluap wilayahnya. | mobil tersembunyi gulir terlihat mewarisi | 2 |
| meluap-y | Menentukan bagaimana menangani isi dari atas / tepi bawah area konten elemen melimpah | mobil tersembunyi gulir terlihat no-display no-konten | 2 |
| meluap-x | Menentukan bagaimana menangani ke kanan / tepi kiri area konten dari meluapnya konten elemen | mobil tersembunyi gulir terlihat no-display no-konten | 2 |
| posisi | Menentukan jenis elemen positioning | absolut tetap relatif statis mewarisi | 2 |
| benar | Ini mendefinisikan elemen menargetkan terdiri perbatasan dan margin kanan mengimbangi antara batas kanan blok. | mobil panjangnya % mewarisi | 2 |
| teratas | Ini mendefinisikan elemen posisi di perbatasan dan margin di blok berisi offset antara batas-batas. | mobil panjangnya % mewarisi | 2 |
| z-index | Mengatur urutan susun elemen | jumlah mobil mewarisi | 2 |