Belajar CSS Part 8 (Mengenal position CSS)

ASSALAMU'ALAIKUM Wr. Wb.

 

Belajar CSS Mengenal Position
Position pada CSS berfungsi untuk mengatur posisi element HTML. Terkadang kita ingin menempatkan posisi element satu dengan yang lain. Maka dengan menggunakan properti Position ini kita dapat menentukan posisi element sesuai keinginan kita.

Adapun beberapa properti CSS yang dapat digunakan posisi element adalah

• static
• relative
• fixed
• absolute

secara umum untuk membuat posisi atau menetapkan posisi sebuah element kita pasti menggunakan property css lainnya seperti mengatur top, left, bottom, right untuk menetapan posisi sebuah element. tetapi property tersebut tidak akan bekerja jika position belum di atur terlebih dahulu. karena property lain tergantung dengan position yang di tetapkan.

Static
Position Static digunakan untuk mengatur posisi element menjadi statis secara default. Element akan mengganti posisi normal secara default.

Index.html

style.css

Hasil

Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal

Index.html

style.css

Hasil

Fixed
Sebuah element HTML yang disetting dengan position fixef akan memiliki sifat tetap. Tidak ada perubahan bahkan ketika halaman website di scroll. Berlaku pengaturan left, bottom, top dan right pada position fixed. Sebagai contoh Navigation Bar pada blog ini menggunakan position fixed


Index.html

Style.css

Hasil

ABSOLUTE
Element HTML yang menggunakan position absolute akan tertimpa dengan element lain. Absoulte adalah salah satu properti position CSS yang sangat berguna. Salah satunya adalah untuk membuat menu dropdown

Sekian dari Saya apabila ada kesalahan Saya minta maaf, TerimaKasih

WASSALAM