The position properti menentukan jenis metode penentuan posisi yang digunakan untuk elemen (statis, relatif, tetap atau absolut).
Posisi Properti
The position properti menentukan jenis metode penentuan posisi yang digunakan untuk elemen.
Ada empat nilai posisi yang berbeda:
-
static -
relative -
fixed -
absolute
Elemen kemudian diposisikan menggunakan bagian atas, bawah, kiri, dan properti yang tepat. Namun, sifat ini tidak akan bekerja kecuali position properti diatur pertama. Mereka juga bekerja secara berbeda tergantung pada nilai posisi.
position: static;
elemen HTML diposisikan statis secara default.
elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan properti yang tepat.
Sebuah elemen dengan position: static; tidak diposisikan dalam cara yang khusus; itu selalu diposisikan sesuai dengan aliran normal halaman:
Berikut adalah CSS yang digunakan:
position: relative;
Sebuah elemen dengan position: relative; diposisikan relatif terhadap posisi normal.
Mengatur atas, kanan, bawah, dan sifat kiri dari elemen yang relatif strategis akan menyebabkan ia disesuaikan jauh dari posisi normal. konten lainnya tidak akan disesuaikan untuk masuk ke setiap celah yang ditinggalkan oleh elemen.
Berikut adalah CSS yang digunakan:
position: fixed;
Sebuah elemen dengan position: fixed; diposisikan relatif terhadap viewport, yang berarti selalu tetap di tempat yang sama bahkan jika halaman tersebut menggulir. atas, kanan, bawah, dan sifat kiri digunakan untuk posisi elemen.
Unsur tetap tidak meninggalkan celah di halaman mana itu biasanya telah berada.
Perhatikan elemen tetap di sudut kanan bawah halaman. Berikut adalah CSS yang digunakan:
Contoh
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} Cobalah sendiri " position: absolute;
Sebuah elemen dengan position: absolute; diposisikan relatif terhadap nenek moyang terdekat diposisikan (bukan relatif diposisikan untuk viewport, seperti tetap).
Namun; jika elemen diposisikan mutlak tidak memiliki nenek moyang strategis, menggunakan badan dokumen, dan bergerak bersama dengan halaman bergulir.
Catatan: "positioned" elemen adalah salah satu yang posisinya apa-apa kecuali static .
Berikut ini adalah contoh sederhana:
Berikut adalah CSS yang digunakan:
Contoh
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Cobalah sendiri " Tumpang Tindih Elements
Ketika elemen diposisikan, mereka dapat tumpang tindih elemen lainnya.
The z-index properti menentukan urutan tumpukan elemen (elemen yang harus ditempatkan di depan, atau belakang, yang lain).
Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:
Ini adalah heading
Karena gambar memiliki z-index -1, itu akan ditempatkan di belakang teks.
Sebuah elemen dengan pesanan tumpukan besar selalu di depan sebuah elemen dengan urutan tumpukan yang lebih rendah.
 | Catatan: Jika dua elemen diposisikan tumpang tindih tanpa z-index yang ditentukan, unsur diposisikan terakhir dalam kode HTML akan ditampilkan di atas. |
|---|
Positioning Teks Dalam Gambar
Bagaimana posisi teks di atas gambar:
Contoh
Cobalah sendiri:
Top Left » Kanan Atas» Kiri Bawah » Bawah Kanan» Centered »
Contoh lebih
Mengatur bentuk elemen
Contoh ini menunjukkan bagaimana untuk mengatur bentuk elemen. Unsur ini dipotong menjadi bentuk ini, dan ditampilkan.
Bagaimana menampilkan melimpah di sebuah elemen menggunakan scroll
Contoh ini menunjukkan bagaimana untuk mengatur properti overflow untuk membuat scroll bar bila konten elemen ini terlalu besar untuk muat di area tertentu.
Cara mengatur browser untuk secara otomatis menangani luapan
Contoh ini menunjukkan bagaimana untuk mengatur browser untuk secara otomatis menangani meluap.
Mengubah kursor
Contoh ini menunjukkan bagaimana untuk mengubah kursor.
Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »
Semua CSS Positioning Properti
| Milik | Deskripsi |
|---|---|
| bottom | Menetapkan margin tepi bawah untuk kotak diposisikan |
| clip | Klip elemen benar-benar diposisikan |
| cursor | Menentukan jenis kursor yang akan ditampilkan |
| left | Set tepi margin kiri untuk kotak diposisikan |
| overflow | Menentukan apa yang terjadi jika konten meluap kotak elemen ini |
| overflow-x | Menentukan apa yang harus dilakukan dengan kiri / kanan tepi konten jika meluap area konten elemen |
| overflow-y | Menentukan apa yang harus dilakukan dengan tepi atas / bawah konten jika meluap area konten elemen |
| position | Menentukan jenis posisi untuk suatu elemen |
| right | Menetapkan margin tepi kanan untuk kotak diposisikan |
| top | Menetapkan margin tepi atas untuk kotak diposisikan |
| z-index | Menetapkan urutan tumpukan elemen |