Lazada

Mengatur Elemen Dengan CSS Position Property

1 Comment December 27, 2018
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>

Mengatur Elemen Dengan CSS Position Static

2. Relative
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>

Mengatur Elemen Dengan CSS Position Relative

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>

Mengatur Elemen Dengan CSS Position Absolute

Position Absolute yang dibatasi oleh elemen parent

<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>

Mengatur Elemen Dengan CSS Position Absolute 2

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
Thumbnail
Diskon Barang Elektronik Di Lazada Hingga 80%
Cek disini
Thumbnail
Promo Cuci Gudang, Diskon Sampai 50%
Cek disini
Thumbnail
Murah Pol - Barang Murah Berkualitas Mewah
Cek disini
Thumbnail
Tampil Cantik Gak Perlu Mahal - Diskon 50%
Cek disini
Thumbnail
Kumpulan Barang Untuk Kesehatan - Diskon 50%
Cek disini

1 comment:

  1. 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

Komentar spam tidak akan di tampilkan !
Maka nikmat Tuhanmu yang manakah yang kamu dustakan?
Kembalilah ke jalan yang benar sebelum Allah sendiri yang memberikan peringatan kepadamu

Lazada