Ada 4 cara dasar mendeklarasikan posisi box:
- float: left (or right)
- position: relative
- position: fixed
- position: absolute
Memposisikan Box dengan CSS
1. Position: static
Posisi statis secara default sebagai “normal flow”
Pada halaman web, kotak blok di posisikan antara satu dengan yang lainnya secara urut menggunakan HTML. Seperti tumpukan dari kiri atas ke bawah. Jarak setiap box di definisikan oleh margin atas dan bawah, collapsing menjadi satu kesatuan.
Dibawah ini merupakan contoh saat sebelum dan sesudah diposisikan:
Sebelum
Sesudah
2. Float
Elemen float akan mengubah suatu elemen keluar dari aturan default atau “normal flow” bergeser ke kanan atau ke kiri. Konten di dalamnya akan ikut bergeser. Elemen float wajib memiliki properti width dengan nilai minimum.
.photo {
float: left;
max-width: 150px;
}
Hasilnya seperti contoh photo ini:
3. Positioning Properties
Ada 4 nilai yang bisa Anda tambahkan ke position property:
- static membuat elemen urut seperti halnya di dokumen, ini adalah aturan default.
- relative membuat posisi elemen relatif terhadap posisi statis, jadi “left:20” untuk menambahkan 20 pixel sebelah kiri elemen.
- absolute membuat posisi elemen relatif terhadap posisi pertama (tidak statis) atau terhadap elemen induk (biasanya induk dari position: relative).
- fixed membuat posisi elemen relatif terhadap jendela browser.
Contoh:
~.box {
width: 300px;
height: 300px;
border: 1px solid #333;
margin: 10px;
display: inline-block;
}
.relative {
position: relative;
top: 50px;
left: -50px;
}
.fixed {
position: fixed;
bottom: 0;
left: 0;
}
.box.absolute {
position: relative;
}
.box.absolute p {
position: absolute;
top: 0;
right: 0;
background: #444;
padding: 10px;
margin: 0;
color: #fff;
}
4. Relative
Posisi relatif menggeser elemen keluar dari posisi normal/default, sehingga memungkinkan Anda untuk memindahkannya “relatif” ke lokasi tersebut. Space yang diambil dari lokasi aslinya tetap dipertahankan dalam aliran.
Contoh:
.date {
position: relative;
top: 40px;
left: -105px;
}
Hasil:
5. Fixed
Fixed element berfungsi untuk mengambil dokumen secara lengkap dari aliran, dan diposisikan relatif terhadap jendela browser.
Contoh:
.create-change {
position: fixed;
bottom: 40px;
right: 0;
}
Hasil:
6. Absolute
Suatu elemen diposisikan relatif terhadap posisi awal (bukan statis) atau elemen induk. Elemen dan spasinya secara utuh diambil dari aliran. Contoh dibawah elemen induk “.post” diberi nilai posisi relatif, sehingga memungkinkan kita untuk mengatur elemen turunannya “.icon” di dalamnya.
Contoh:
.post {
position: relative;
}
.icon {
position: absolute;
left: -60px;
right: 0;
}
Hasil:
