CSS Layout – Position
Properti position menentukan jenis metode penempatan untuk suatu elemen :
• static
• relative
• fixed
• absolute
• sticky
position: static;
secara default Elemen HTML diposisikan statis, artinya tidak berpengaruh terhadap property : top,
bottom, left, and right.
[Link] {
position: static;
border: 3px solid #73AD21;
}
position: relative;
Elemen dengan position: relative;diposisikan relatif terhadap posisi normalnya. Elemen HTML dapat
berpengaruh terhadap property : top, bottom, left, and right.
[Link] {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
Elemen dengan position: fixed;diposisikan relatif terhadap area pandang, yang berarti elemen
tersebut selalu berada di tempat yang sama meskipun halaman di-scroll property : top, bottom, left,
and right digunakan untuk memposisikan elemen.
[Link] {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
Elemen with position: absolute;diposisikan relatif terhadap elemen induk yang diposisikan (bukan
diposisikan relatif terhadap viewport, seperti fixed).
Namun; jika elemen yang diposisikan absolut tidak memiliki elemen induk yang diposisikan, elemen
tersebut akan menggunakan badan dokumen, dan bergerak seiring dengan pengguliran halaman.
Contoh
[Link] {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
[Link] {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
position: sticky;
Elemen dengan position: sticky;diposisikan berdasarkan posisi gulir pengguna.
Elemen sticky (lengket) beralih antara relative dan fixed, bergantung pada posisi gulir. Itu diposisikan
relatif sampai posisi offset tertentu terpenuhi di viewport - kemudian "menempel" di tempatnya
(seperti posisi: tetap).
[Link] {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
CSS Layout - The z-index Property
Properti z-index menentukan urutan tumpukan suatu elemen. Sebuah elemen dapat diposisikan
tumpang tindih dengan elemen lainnya. Properti z-index menentukan urutan tumpukan suatu elemen
(elemen mana yang harus ditempatkan di depan, atau di belakang, elemen lainnya).
Sebuah elemen dapat memiliki urutan tumpukan positif atau negatif:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Catatan: z-index hanya berfungsi pada elemen yang diposisikan (position: absolute, position: relative,
position: fixed, or position: sticky) dan item fleksibel (elemen yang merupakan turunan langsung dari
tampilan: elemen fleksibel).
CSS Layout – Overflow
Properti CSS overflow mengontrol apa yang terjadi pada konten yang terlalu besar untuk dimasukkan
ke dalam suatu area. Properti overflow menentukan apakah akan memotong konten atau
menambahkan scrollbar ketika konten suatu elemen terlalu besar untuk muat di area yang ditentukan.
Properti overflow memiliki value sebagai berikut:
• visible - Default. Overflow tidak terpotong. Konten ditampilkan di luar kotak elemen.
• hidden – overflow terpotong. konten lainnya tidak terlihat
• scroll - overflow terpotong, dan scrollbar ditambahkan untuk melihat konten lainnya
• auto - Mirip dengan scroll, tetapi menambahkan scrollbar hanya jika diperlukan
overflow: visible, hidden, scroll, auto
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible //hidden, scroll, auto;
}
overflow-x and overflow-y
Properti overflow-x and overflow-y menentukan apakah akan mengubah overflow konten secara
horizontal atau vertikal (atau keduanya):
overflow-x menentukan apa yang harus dilakukan dengan tepi kiri/kanan konten.
overflow-y menentukan apa yang harus dilakukan dengan tepi atas/bawah konten.
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
CSS Layout - float and clear
Properti CSS float menentukan bagaimana sebuah elemen harus melayang. Properti CSS clear
menentukan elemen apa yang bisa melayang di samping elemen yang dibersihkan dan di sebuah sisi.
float Property
Properti ini float digunakan untuk memposisikan dan memformat konten, misalnya membiarkan
gambar melayang ke kiri ke teks.
Properti float dapat menggunakan salah satu dari value berikut:
• left- Elemen mengapung di sebelah kiri wadahnya
• right- Elemen mengapung di sebelah kanan wadahnya
• none- Elemen tidak melayang (akan ditampilkan tepat di tempat kemunculannya dalam teks).
Ini adalah bawaannya
• inherit- Elemen mewarisi nilai float dari induknya
Dalam penggunaannya yang paling sederhana, float properti ini dapat digunakan untuk membungkus
teks di sekitar gambar.
Example - float: right;
img {
float: right //left, none, inherit;
}
Contohnya adalah melayang bersebelahan
Biasanya elemen div akan ditampilkan di atas satu sama lain. Namun, jika kita menggunakan float:
left kita dapat membiarkan elemen melayang bersebelahan:
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
CSS Layout - clear and clearfix
Clear Property
Ketika kita menggunakan property float, dan kita menginginkan elemen berikutnya di bawah (bukan
di kanan atau kiri), kita harus menggunakan clear property. Properti clear menentukan kondisi
terhadap elemen yang berada di sebelah elemen floating.
Properti clear dapat menggunakan salah satu dari value berikut:
• none- Elemen tidak didorong ke bawah elemen floating kiri atau kanan.
• left- Elemen didorong ke bawah elemen floating kiri
• right- Elemen didorong ke bawah elemen floating kanan
• both- Elemen didorong ke bawah elemen floating kiri dan kanan
• inherit- Elemen mewarisi nilai jelas dari induknya
Contoh penerapan : [Link]
Clearfix
Jika elemen terapung / floating lebih tinggi dari elemen yang menampungnya, elemen tersebut akan
"meluap" / overflow ke luar wadahnya. Untuk mengatasi masalah ini dapat menggunakan clearfix :
Contoh penerapan : [Link]
Contoh penerapan floating :
Contoh penerapan : [Link]
Box-sizing
Kita dapat dengan mudah membuat tiga kotak mengambang/floating secara berdampingan. Namun,
bila menambahkan sesuatu yang memperbesar lebar setiap kotak (misalnya padding atau pembatas),
kotak tersebut akan pecah. Properti box-sizing memungkinkan kita untuk memasukkan padding dan
border dalam total lebar (dan tinggi) kotak, memastikan bahwa padding tetap berada di dalam kotak
dan tidak pecah.
grid of boxes dapat digunakan untuk menampilkan gambar secara berdampingan
contoh penerapan : [Link]
Kotak dengan Tinggi Sama
Pada contoh sebelumnya, kita telah mempelajari cara mengapungkan kotak secara berdampingan
dengan lebar yang sama. Namun, tidak mudah membuat kotak terapung dengan ketinggian yang
sama. Cara paling cepat dengan menyetel ketinggian tetap, seperti pada contoh di bawah ini:
Contoh penerapan : [Link]
Menu Navigasi
Kita dapat menggunakan float untuk membuat menu navigasi horizontal:
Contoh penerapan : [Link]
Contoh Layout website dengan navigation, header, konten dan footer
Contoh penerapan : [Link]
CSS Layout - Horizontal & Vertical Align
Horizontal dan vertical alignment digunakan untuk mengatur tata letak element terutama pada
element block seperti <div>.
Center Align Elements
Untuk menempatkan blok elemen secara horizontal cukup menggunakan margin: auto;
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Center Align Text
Untuk menempatkan teks di dalam elemen, gunakan text-align: center;
.center {
text-align: center;
border: 3px solid green;
}
Center an Image
Untuk memusatkan gambar, atur margin kiri dan kanan auto dan buat menjadi block elemen:
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Left and Right Align - Using position
Salah satu cara untuk menyelaraskan elemen adalah dengan menggunakan position: absolute;:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Center Vertically - Using padding
Ada banyak cara untuk memusatkan elemen secara vertikal di CSS. Solusi sederhana adalah dengan
menggunakan top dan bottom padding:
.center {
padding: 70px 0;
border: 3px solid green;
}
Untuk memusatkan keduanya secara vertikal dan horizontal, gunakan padding dan text-align:
center:
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
Penugasan / Latihan
Buatlah project website / halaman web dengan HTML dan CSS dengan tema bebas dengan layout
seperti berikut:
Header : Text / Gambar
Navigation Bar
Konten : Text, gambar, table dll
Footer