Belajar CSS - Apa itu Position Pada CSS?

Perlu di ketahui, didalam pembuatan sebuah website , memerlukan sebuah CSS dan di dalam CSS itu sendiri sangat banyak hal yang bisa kita lakukan di dalam mengatur sebuah halaman website, dan yang akan kita bahas pada kesempatan ini adalah , kita akan membahas tentang Mengenal Position Pada CSS.

Selamat Datang kembali teman teman, saya harap teman teman semua senang berada disini :)

Posisi Pada CSS

Pembahasan

1. CSS position Static
2. CSS position Relative
3. CSS position Absolute
4. CSS position Fixed

Nah jadi beberapa hal diatas yang akan kita bahas sekilas pada halaman ini.

CSS Position Static

Oke teman teman, untuk yang pertama ini adalah CSS Position Static.

Secara kata Static itu artinya diam, atau tidak berubah keadaan.

Nah jadi maksud CSS Position Static itu adalah, 

Sebuah Property pada CSS, yaitu property yang sudah ada di dalam sebuah halaman website atau bisa dibilang property bawaan, jadi property ini tidak merubah tampilan di dalam sebuah halaman website. dan akan mengikuti sesuai dengan file.html nya.

CSS Position Relative

Untuk yang kedua ini adalah CSS Position Relative , pada property ini hampir sama dengan CSS Position Static, namun pada CSS Position Relative ini, value top, bottom, right, left, akan berfungsi dan biasanya penulisan nya menggunakan nilai px.

CSS Position Absolute

Dan pada posisi ketiga yaitu CSS Position Absolute, yang harus teman teman perhatikan pada posisi ini adalah.

CSS Position Absolute, pada Property ini teman teman bisa menggunakan value top, bottom, right, left. Namun perlu di perhatikan, jika teman teman menggunakan Property ini, maka pada elemen yang diberi property ini akan di anggap tidak ada atau menghilang, dan elemen selanjutnya akan mengisi kekosongan tersebut.

Misalkan seperti ini

Terdapat sebuah menu, dan h1 dan menu itu kita beri property Absolute, maka otomatis h1 akan mengisi bagian kosong , karena menu dianggap menghilang

CSS Position Fixed

Pada bagian keempat ini, yaitu CSS Position Fixed, pada property Fixed teman teman juga bisa menggunakan top, bottom, right, left, cara kerjanya adalah seperti ini.

Misalkan terdapat sebuah menu, dan h1, Jika pada sebuah elemen h1 diberi Property Fixed dengan value top:100px; dan right:200px; . dan yang terjadi adalah, elemen h1 akan tetap berada di dalam posisi itu, dan apabila di scroll akan tetap berada di dalam posisi itu. 

Nah jadi kurang lebih beberapa Penjelasan Position pada CSS diatas, untuk artikel selanjutnya kita akan langsung mempraktekan nya.

BELAJAR CSS | Memahami Position Static, Relative, Absolute dan Fixed pada CSS

Terimakasih sudah berkunjung.
Salam Semangat!!

Berbagi :