Belajar CSS - Memahami Position Static, Relative, Absolute dan Fixed pada CSS

Hai teman teman Awonapa, selamat datang kembali. Pada artikel sebelumnya kita membahas Pengertian Position Pada CSS, dan pada kali ini kita akan membahas bagaimana cara menggunakan dan Memahami Position Static, Relative, Absolute dan Fixed pada CSS, nah untuk teman teman yang ketinggalan, bisa melihat nya disini nih..

BELAJAR CSS | Position Pada CSS

Nah pada link diatas, itu berisi tentang pengertian dari masing masing Position yang ada pada CSS, yaitu  Static, Relative, Absolute dan Fixed.

Position Static, Relative, Absolute dan Fixed

Oke teman teman langsung saja kita mulai membahas nya satu persatu.

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 full pada halaman ini.

CSS Position Static

Static yang berarti tidak berubah ataupun diam, 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.

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.

Penggunaan Position Relative

#pos-relative {
            position: relative;
            top: 100px;
            left: 200px;
        }

Maka view halaman yang akan dihasilkan adalah seperti dibawah ini

Tanpa Relative

Dengan Relative

Dan itulah yang dihasilkan oleh Property Relative. dia akan mengikuti value yang kita tulis.

CSS Position Absolute

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.

Penggunaan Position Absolute

#pos-absolute {
            position: absolute;
            top: 100px;
            left: 200px;
        }

Dan akan menghasilkan sebuah view seperti ini.

Tanpa Absolute

Dengan Absolute

CSS Position Fixed

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. 

contoh nya adalah seperti ini

See the Pen
position css by Wahyu Pambudi (@wahyup)
on CodePen.

Nah jadi seperti itu teman teman hasil dari sebuah Property Fixed, dan jika di scroll juga dia akan tetap berada di situ.

Biaiklah teman teman semoga bermanfaat materi di artikel ini, terimakasih sudah berkunjung.
Salam Semangat!!

Berbagi :