Mengatur Elemen Dengan CSS Position Property
Cara Untuk Mengatur Elemen HTML Menggunakan CSS Position Property. Dalam pembuatan website pengaturan letak pada setiap elemen html sangatlah beragam, dan untuk mengatur opsi tersebut kita dapat menggunakan kode css agar tampilan website bisa terlihat nyaman dan fleksibel.
Baca juga :
Memahami Fungsi Margin, Padding Dan Border Di CSS
Cara Mengatur Posisi Gambar Dengan CSS
Cara Mengatur Format Text Dengan CSS
Kumpulan Value Pada CSS Position Property
1. Static
Secara default atau otomatis setiap elemen html menggunakan position:static sehingga kita tidak dapat melakukan perubahan letak pada elemen html tersebut, jadi properti seperti top, bottom, right, dan left tidak dapat berfungsi dengan baik. Coba kode html ini dan lihat hasilnya maka seperti gambar berikut
<html>
<head>
<title>Mengatur Posisi Elemen HTML</title>
<style>
.square{width:120px;height:120px;background:red;top:160px;left:100px;}
</style>
</head>
<body>
<div class="square">Square</div>
</body>
</html>
Relative adalah sebuah posisi element html terurut sesuai dengan urutan elemen html akan tetapi kita dapat mengubah posisi atau letak elemen tersebut sesuai dengan keinginan kita
<html>
<head>
<title>Mengatur Posisi Elemen HTML</title>
<style>
.square{width:120px;height:120px;background:red;top:100px;left:100px;position:relative}
</style>
</head>
<body>
<div class="square">Square</div>
</body>
</html>
3. Absolute
Selanjutnya value absolute yang merupakan salah satu properti css position selanjutnya, position:absolute adalah sebuah posisi pada elemen html yang tidak terikat oleh elemen parent akan tetapi jika elemen parent tersebut menggunakan position:relative maka position:absolute akan dibatasi posisinya oleh elemen parent tersebut
<html>
<head>
<title>Mengatur Posisi Elemen HTML</title>
<style>
.square{width:150px;height:150px;background:red;}
.square2{width:40px;height:40px;background:blue;bottom:30px;right:30px;position:absolute}
</style>
</head>
<body>
<div class="square">
<div class="square2"></div>
</div>
</body>
</html>
<html>
<head>
<title>Mengatur Posisi Elemen HTML</title>
<style>
.square{width:150px;height:150px;background:red;position:relative}
.square2{width:40px;height:40px;background:blue;bottom:30px;right:30px;position:absolute}
</style>
</head>
<body>
<div class="square">
<div class="square2"></div>
</div>
</body>
</html>
4. Fixed
Fixed position hampir mirip dengan position:absolute tapi yang membedakannya adalah apabila kita melakukan scrolling pada halaman website tersebut elemen tersebut mengikuti kemana saja saat kita scrolling mouse tersebut.
Sekarang kalian coba simpan dan buka kode html berikut kemudian lakukan scrolling pada browser kalian maka kotak box berwarna biru akan mengikuti scroll yang ada pada halaman web tersebut
<html>
<head>
<title>Mengatur Posisi Elemen HTML</title>
<style>
.square{width:70%;background:red;position:relative;padding:30px}
.square1{width:100%;height:1000px;background:white;position:relative;margin:50px 0;}
.square2{width:40px;height:40px;background:blue;bottom:30px;right:30px;position:fixed}
</style>
</head>
<body>
<div class="square">
<div class="square1"></div>
<div class="square1"></div>
<div class="square1"></div>
<div class="square1"></div>
<div class="square1"></div>
<div class="square1"></div>
<div class="square1"></div>
<div class="square1"></div>
<div class="square1"></div>
<div class="square2"></div>
</div>
</body>
</html>5. Sticky
Sticky fungsinya hampir mirip dengan position:fixed akan tetapi position:sticky hanya akan bekerja pada elemen yang tidak menggunakan properti overflow:hidden, sticky hanya akan melayang dengan batasan elemen tertentu, apabila ada elemen lain yang menggunakan sticky maka elemen sticky sebelumnya akan berhenti fungsinya. Biasanya sticky juga sering digunakan untuk menampilkan konten widget yang lumayan panjang sehingga isi dari keseluruhan konten tersebut bisa terlihat jelas walaupun posisinya melayang seperti fixed yang mengikuti scrollbar
<html>
<head>
<title>Mengatur Posisi Elemen HTML</title>
<style>
.square{width:150px;height:40px;background:blue;position:sticky;top:0;color:fff}
.sub_square{width:150px;height:350px;background:red;margin:10px 0}
</style>
</head>
<body>
<div id="container">
<div class="square">Square 1</div>
<div class="sub_square"></div>
<div class="sub_square"></div>
<div class="square">Square 2</div>
<div class="sub_square"></div>
<div class="sub_square"></div>
<div class="sub_square"></div>
<div class="square">Square 3</div>
<div class="sub_square"></div>
<div class="sub_square"></div>
<div class="sub_square"></div>
</div>
</body>
</html>Cukup itu saja penjelasan singkat mengenai Mengatur Elemen Dengan CSS Position Property
Baca juga :
Memahami Atribut Class Dan Id Pada HTML
Mengatur Posisi Paragraf Dengan HTML Dan CSS
Mengatur Heading Dan Format Text Web Menggunakan HTML
Promo Menarik
Thanks to Admin for Sharing such useful Information. I really like your Blog. Addition to your Story here I am Contributing 1 more Similar Story Tricks behind CSS div position property.
ReplyDelete