Mengenal Position Property dan Value di CSS dan Cara Menggunakannya

Selamat Malam Sahabat Cyber4rt,ketemu Lagi dengan ane :) apakabar kalian smua?semoga saja dalam keadaan sehat walafiat

Langsung saja ya

Cekidot

========================================================================

Pengertian Position Property

Position Property merupakan salah satu properti dalam CSS yang berfungsi untuk menentukan posisi dari objek selector.
Position ini juga bisa memindahkan objek ke tempat lain hanya dengan menggunakan CSS ! Jadi jika kamu memakai platform blogging yang tidak mendukung fitur template, kamu tetap bisa merubah tampilan blog dengan menggunakan properti yang satu ini.

5 Value pada Position Property

Untuk value dari position property ini ada 5 yaitu sebagai berikut :

• static
• relative
• absolute
• fixed
• inherit

Akan saja berikan pengertian dari masing masing value di atas !
position:static
Posisi ini merupakan posisi deafult suatu elemen (statis), tata letaknya seerti tag div biasa. Pada value ini property top, bottom, right, dan left tidak akan berpengaruh sama sekali

position:relative
Posisi ini sering digunakan, pada posisi ini kita bisa memanfaatkan properti seperti top, bottom, right, dan left

position:absolute
Position yang satu ini jika di gunakan, maka objek akan mengikuti parent (elemen induk) dengan catatan elemen induk harus menggunakan position:relative

position:fixed
Hampir sama seperti absolute, tetapi fixed ini akan selalu pada posisinya walaupun browser di scroll ke bawah ataupun ke atas

position:inherit
Posisi yang ini juga mengikuti elemen induk. Contohnya jika elemen induk mempunyaiposition:absolute maka elemen yang di berikan position dengan value inherit maka hasilnya akan tetap menjadi position:absolute
Sebenarnya saya juga tidak terlalu faham dengan semua value dari position property ini. Tetapi saya mencoba membagikan ilmu yang saya ketahui.
Baiklah saya lanjutkan dengan cara menggunakan position property.

Menggunakan Position Property Pada CSS

Perhatikan contoh bahasa style berikut !

#menu1 {
position:relative;
top:3px;
bottom:5px;
right:3px;
left:3px;}

Itulah contoh dari penggunaan position property pada CSS ! dan berikut adalah keterangannya

• position = ganti sesuai dengan value yang diinginkan / diperlukan
• top = jarak antara bagian atas dengan selector #menu1
• bottom = jarak antara bagian bawah dengan selector #menu1
• right = jarak antara bagian kanan dengan selector #menu1
• left = jarak antara bagian kiri dengan selector #menu1

Jika kamu tidak ingin memberikan jarak pada salah satu sisi, kamu tidak perlu menuliskantop:0px; dan sejensinnya karena hanya akan membuang waktu.
Kamu hanya perlu untuk tidak menuliskan salah satu property top, bottom, right, maupun left.
Itulah sedikit mengenai Position Property pada CSS, jika ada pertanyaan atau masukan silahkan berkomentar. Sekian artikel pada malam hari ini & semoga bermanfaat . . .