Tata Letak CSS - Posisi Properti
Properti positionmenentukan jenis metode penentuan posisi yang digunakan untuk suatu elemen (statis, relatif, tetap, absolut, atau lengket).
Posisi Properti
Properti positionmenentukan jenis metode penentuan posisi yang digunakan untuk suatu elemen.
Ada lima nilai posisi yang berbeda:
staticrelativefixedabsolutesticky
Elemen kemudian diposisikan menggunakan properti atas, bawah, kiri, dan kanan. Namun, properti ini tidak akan berfungsi kecuali jika position
properti disetel terlebih dahulu. Mereka juga bekerja secara berbeda tergantung pada nilai posisi.
posisi: statis;
Elemen HTML diposisikan statis secara default.
Elemen posisi statis tidak terpengaruh oleh properti atas, bawah, kiri, dan kanan.
Elemen dengan position: static;tidak diposisikan dengan cara khusus apa pun; itu selalu diposisikan sesuai dengan aliran normal halaman:
Berikut CSS yang digunakan :
Contoh
div.static {
position: static;
border: 3px solid #73AD21;
}
posisi: relatif;
Sebuah elemen dengan position: relative;diposisikan relatif terhadap posisi normalnya.
Menyetel properti atas, kanan, bawah, dan kiri dari elemen yang posisinya relatif akan menyebabkannya disetel menjauh dari posisi normalnya. Konten lain tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen.
Berikut CSS yang digunakan :
Contoh
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
posisi: tetap;
Elemen dengan position: fixed;diposisikan relatif terhadap viewport, yang berarti selalu tetap di tempat yang sama bahkan jika halaman di-scroll. Properti atas, kanan, bawah, dan kiri digunakan untuk memposisikan elemen.
Elemen tetap tidak meninggalkan celah di halaman tempat elemen tersebut biasanya berada.
Perhatikan elemen tetap di sudut kanan bawah halaman. Berikut CSS yang digunakan :
Contoh
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
}
position: fixed;posisi: mutlak;
Elemen dengan position: absolute;diposisikan relatif terhadap leluhur yang diposisikan terdekat (bukan diposisikan relatif terhadap viewport, seperti tetap).
Namun; jika elemen yang diposisikan absolut tidak memiliki leluhur yang diposisikan, elemen tersebut menggunakan badan dokumen, dan bergerak bersama dengan pengguliran halaman.
Catatan: Elemen posisi absolut dihilangkan dari aliran normal, dan elemen dapat tumpang tindih.
Berikut adalah contoh sederhana:
Berikut 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;
}
posisi: lengket;
Elemen dengan position: sticky;diposisikan berdasarkan posisi gulir pengguna.
Elemen lengket beralih antara relativedan fixed, tergantung pada posisi gulir. Itu diposisikan relatif sampai posisi offset yang diberikan terpenuhi di viewport - lalu "menempel" di tempatnya (seperti position:fixed).
Catatan: Internet Explorer tidak mendukung pemosisian tetap. Safari memerlukan awalan -webkit- (lihat contoh di bawah). Anda juga harus menentukan setidaknya satu dari top, right, bottomatau leftagar penempatan tetap berfungsi.
Dalam contoh ini, elemen tempel menempel di bagian atas halaman ( top: 0), saat Anda mencapai posisi gulirnya.
Contoh
div.sticky {
position: -webkit-sticky; /* Safari */
position:
sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
Memposisikan Teks Dalam Gambar
Cara memposisikan teks di atas gambar:
Contoh
Cobalah sendiri:
Lebih Banyak Contoh
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
All CSS Positioning Properties
| Property | Description |
|---|---|
| bottom | Sets the bottom margin edge for a positioned box |
| clip | Clips an absolutely positioned element |
| left | Sets the left margin edge for a positioned box |
| position | Specifies the type of positioning for an element |
| right | Sets the right margin edge for a positioned box |
| top | Sets the top margin edge for a positioned box |