Tutorial Dasar CSS Pengenalan Position Pada CSS

Rafiqi, S.Kom.
Rafiqi, S.Kom.
Juli 21, 2020
2
Tutorial Dasar CSS Pengenalan Position Pada CSS
Hi Web Developer! kali ini guru design akan berbagi tutorial position pada css. Buat para master tolong di koreksi kalau-kalau ada salah, tapi saya rasa tidak ada heheh. Buat para newbie yok di simak dan dipahami. Ok lanjut:

Pertama kita harus tahu dulu position pada CSS itu apa sih?, jadi position pada CSS adalah suatu setting atau pengaturan yang mengatur posisi sebuah element HTML. Semisal kita ingin membuat beberapa element HTML dengan posisi yang berbeda maka position pada CSS ini wajib digunakan, dengan adanya property position ini kita bisa sesuka kita menempatkan posisi sebuah element HTML.

Adapun position yang dapat digunkan untuk mengatur posisi sebuah elemen HTML adalah:
  1. Position:static;
  2. Position:relative;
  3. Position:fixed;
  4. Position:absolute;
Apakah sudah bisa dipahami?, saya anggap sudah dapat dipahami ok lanjut.
Berikut tabel properti position

Properti Value Keterangan
Position:static static Posisi ini digunakan untuk mengatur sebuah element menjadi statis secara default dalam arti element HTML akan mengikuti posisi normal secara default.
Position:relative relative Posisi ini digunakan untuk mengatur sebuah element menjadi posisi normal.
Position:fixed fixed Posisi ini digunakan untuk mengatur sebuah element menjadi posisi tetap, walaupun di scroll   sekalipun. Posisi ini biasanya digunakan pada sebuah header atas website.
Position:absolute absolute Posisi ini digunakan untuk mengatur sebuah element tertimpa dengan elemen lainnya. Posisi ini biasanya digunakan pada menu dropdown sebuah website.

Jika ada yang kurang di pahami silahkan tulis di komentar

NEXT Tutorial Dasar CSS Membuat Efek Transisi Pada Element HTML (Ready)
Sekian semoga bermanfaat terimakasih.
Rafiqi, S.Kom.