css part 5 (Perbedaan CSS Position Static, Relative, Absolute, Fixed)

ulil   September 25, 2017   Comment  

 css part 5 (Perbedaan CSS Position Static, Relative, Absolute, Fixed)

A. Pendahuluan
     1. Pengertian
        Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
    2. Latar Belakang
       belajar css

    3. Maksud dan Tujuan
       memahami tentang position di css

B. Alat dan Bahan
pc/laptop
text editor

C. Durasi Waktu
-
D. Uraian Kegiatan
Perlu diketahui sebelumnya, bahwa properti position memanipulasi lokasi elemen. Ada beberapa jenis position yang bisa kita tentukan, antara lain :

1. Static
2. Relative
3. Absolute
4. Fixed
5. Inherit

Static

Properti static merupakan properti bawaan semua elemen, dimana semua elemen akan memiliki properti ini. Dengan properti ini, elemen akan menempati posisi mengikuti alur halaman.
Jadi, apabila kita menambahkan value top, bottom, left, right, value tersebut tidak akan menghasilkan apapun.

Relative

Posisi elemen tetap mengikuti alur dokumen, hampir sama dengan value static. Yang menjadi perbedaan yaitu, value top, bottom, left, right akan berfungsi. Pengaturan posisi pada suatu elemen menggunakan value tersebut akan “mendorong” elemen tersebut ke arah yang diinginkan
Berikut dibawah ini merupakan contoh penggunakan elemen position dalam CSS
Properti relative bergantung pada posisi elemen yang ada diatas. Pada kode dibawah, posisi elemen terdorong ke bawah (karena kita memberikan top sebesar 20px)

.element { position: relative; top: 20px; }

1 2 3 4

.element {     position: relative;     top: 20px; }

Gambar diatas merupakan elemen yang belum diberikan posisi

Gambar diatas merupakan elemen yang telah diberikan posisi top sebesar 20px.

Bisa terlihat perbedaannya, jadi properti relative ini bergantung pada posisi elemen yang ada diatas / elemen sebelumnya.

Absolute

Elemen akan dihilangkan / dicabut dari alur dokumen, dan elemen lainnya akan bekerja sebagaimana mestinya (tidak terganggu dengan elemen yang diberikan properti absolute)
Apabila element yang mempunyai properti absolute tersebut ada didalam sebuah element lagi (parent), maka element tersebut akan diabaikan, seakan-akan elemen tersebut tidak ada di dalam element parent tersebut

.element { position: absolute; }

1 2 3

.element {     position: absolute; }

Gambar diatas  merupakan contoh penggunaan properti absolute

Apabila kita mengatur value seperti top, bottom, left, right, maka element child tersebut akan merespon dengan dimensi dokumen, bukan pada element parent-nya. Hampir sama dengan elemen yang diberi properti fixed

.element { position: absolute; left: 0; right: 0; bottom: 0; }

1 2 3 4 5 6

.element {     position: absolute;     left: 0;     right: 0;     bottom: 0; }

Gambar diatas merupakan contoh penggunaan properti absolute dengan value yang sudah ditentukan.

Perlu diperhatikan bahwa ukuran element child diatas mengikuti ukuran dokumen.
Agar element child posisinya mengikuti elemen parent, kita perlu menambahkan properti pada elemen parent itu sendiri

.parent { position: relative; }

1 2 3

.parent {     position: relative; }

Dengan itu, maka element child akan mengikuti element parent.

Fixed

Elemen akan dicabut / dilepas dari alur dokumen, hampir sama dengan elemen yang diberi properti absolute. Yang menjadi perbedaan, elemen yang diberikan posisi fixed akan selalu mengikuti (relative) dokumen, bukan element parent tertentu, atau dengan scroll halaman web.

contoh:

 
E.Hasil Yang Didapat
memahami tentang css

F. Referensi
https://id.wikipedia.org/wiki/Cascading_Style_Sheets
https://belajarkoding.net/perbedaan-css-position-static-relative-absolute-fixed-dan-inherit/