Dalam tutorial kali ini kita akan membahas mengenai CSS Position, CSS Position digunakan untuk mengatur posisi dari sebuah elemen HTML pada saat ditampilkan. Pada proses pembuatan design web kita bisa membuat beberapa element HTML, dan anda juga harus mengatur bagaimana posisi elemen – elemen tersebut, apakah saling menumpuk, atau saling bersebelahan, nah untuk memfasilitasi hal tersebut CSS memiliki fitur yang dikenal dengan nama CSS Position
Dalam CSS Position terdapat beberapa value yang bisa anda gunakan antara lain :
- Static
- Relative
- Fixed
- Absolute
- Sticky
Masing – Masing Value memiliki fungsi yang berbeda dalam hal mengatur position suatu elemen dengan elemen yang lain, kita akan membahasnya satu persatu dalam tutorial kali ini.
Position Static
Position Static adalah settingan default posisi dalam elemen HTML, dengan menggunakan position static anda tidak dapat mengatur posisi dari elemen, semisal posisi left,right,top,bottom, coba anda perhatikan skrip HTML dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Position</title>
<style type="text/css">
.coba
{
position: static;
left: 50px;
top: 100px;
border: solid 5px black;
}
</style>
</head>
<body>
<div class="coba">
ini adalah contoh penggunaan position:static;
</div>
</body>
</html>semisal kita simpan dengan nama position-static.html, lalu kita buka di browser maka hasilnya adalah :
Keterangan :
- Maka hasilnya elemen yang ditampilkan mengabaikan bagian dari position seperti pada css kita telah mengatur left (jarak sebelah kiri) adalah 50 pixel tetapi object tetap ditampilkan tanpa ada jarak disebelah kiri, lalu kita juga mengatur top (jarak bagian atas) adalah 100 pixel, tetapi object tetap ditampilkan tanpa ada jarak disebelah atas.
Position Relative
Berbeda dengan position:static, pada position relative ini anda dapat mengatur posisi dari elemen yang ditampilkan, perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Position</title>
<style type="text/css">
.coba
{
position: relative;
left: 50px;
top: 100px;
border: solid 5px black;
}
</style>
</head>
<body>
<div class="coba">
ini adalah contoh penggunaan position:relative;
</div>
</body>
</html>semisal kita simpan dengan nama position-relative.html, lalu kita buka di browser maka hasilnya adalah :
Keterangan :
- Elemen tersebut ditampilkan dengan posisi 50 pixel dari sebelah kiri karena kita menset left: 50px, dan 100 pixel dari sebelah atas karena kita menset top:100px
- Selain itu elemen tersebut bisa kita set posisinya karena kita menggunakan position:relative
Position Fixed
Position Fixed ini sama dengan position relative yaitu bisa kita set untuk bagian dari posisi elemennya, tidak hanya itu saja position fixed memiliki kelebihan untuk menset posisi elemen untuk tidak berubah meskipun dilakukan scroll pada page, contoh untuk penggunaan position fixed yang sering kita temui adalah pada bagian chat box di facebook yang berada pada bagian kanan bawah, meskipun kita scroll posisinya tetap ada disana, nah itu adalah contoh penggunaan dari position fixed, untuk memahami silahkan perhatikan skrip HTML dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Position</title>
<style type="text/css">
.coba
{
position: fixed;
left: 50px;
top: 100px;
border: solid 5px black;
}
</style>
</head>
<body>
<div class="coba">
ini adalah contoh penggunaan position:fixed;
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h1>ini adalah paragraf Baru</h1>
</body>
</html>Semisal kita simpan dengan nama position-fixed.html, lalu kita buka di browser maka hasilnya adalah :
Lalu saya scroll ke arah bawah…..
Keterangan :
- Coba perhatikan pada bagian objek yang menggunakan class coba telah kita berikan property position dengan value fixed, lalu silahkan lakukan scroll maka elemen tersebut tetap berada ditempat yang sama meskipun kita lakukan scroll, itu adalah effect dari penggunaan property position dengan value fixed.
Position Absolute
Position ini digunakan untuk mengatur posisi sebuah elemen yang ingin menimpa elemen lain, agar teman – teman lebih memahami konsep position absolute silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Position</title>
<style type="text/css">
.a
{
position: static;
width: 500px;
height: 300px;
background-color: green;
border: solid 5px black;
}
.b
{
position: absolute;
width: 500px;
height: 300px;
left: 50px;
top: 50px;
background-color: orange;
border: solid 5px black;
}
</style>
</head>
<body>
<div class="b">
ini adalah contoh penggunaan position:absolute;
</div>
<div class="a">
ini adalah contoh penggunaan position:fixed;
</div>
</body>
</html>Semisal kita simpan dengan nama position-absolute.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- untuk elemen yang menggunakan class=”b” berada diatas pada saat kita coba menumpuk 2 elemen, hal tersebut karena kita menggunakan property position dengan value absolute pada class b
Position Sticky
Position Sticky memiliki konsep yang hampir mirip dengan position fixed, perbedaannya ada ketika halaman di scroll, ketika halaman di scroll maka objek ini akan berada pada bagian atas halaman web, untuk lebih memahami silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky; /* jika anda menggunakan safari */
position: sticky;
top: 0;
padding: 10px;
background-color: salmon;
border: 2px solid black;
}
</style>
</head>
<body>
<p>Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf </p>
<div class="sticky">Objek dengan Position Sticky</div>
<div style="padding-bottom:2000px">
<p>Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf </p>
</div>
</body>
</html>semisal kita simpan dengan nama position-sticky.html, lalu kita coba buka di browser maka hasilnya adalah :
Penjelasan :
- pada gambar pertama objek yang menggunakan position-sticky yang menggunakan warna background merah mudah itu, ditampilkan seperti halnya elemen yang lain.
- Pada gambar kedua kita coba scroll dari halaman web, akhirnya objek yang menggunakan position:sticky tersebut berada pada bagian atas dari sebuah elemen tanpa ada jarak dibagian atas, hal tersebut dikarenakan kita set bagian property top dengan nilai 0
Mengenal Istilah Overlapping Element
Konsep Overlapping Element ini digunakan untuk membuat elemen yang saling menumpuk, dan anda bisa mengatur posisi dari tumpukannya.
Property yang kita gunakan adalah z-index, coba anda perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<h1>Warung Belajar</h1>
<img src="warungbelajar.png" width="100" height="140">
</body>
</html> semisal kita simpan dengan nama overlapping-element.html, lalu kita buka di browser, maka hasilnya :
Keterangan :
- gambar warung belajar ditampilkan di bagian belakang dari text, hal tersebut karena kita memberikan property z-index: -1; pada bagian tag img
Nah banyak fitur CSS yang digunakan untuk mengatur dari posisi elemen, anda dapat mengatur posisi elemen sesuai yang kebutuhan dan menyesuaikan dari nilai property position.
Jika ada yang ingin didiskusikan silahkan di kolom komentar, terima kasih sampai jumpa di tutorial selanjutnya