Perbedaan Static Flow dan Non-Static Flow.

Dhe997
Sebenarnya CSS memiliki dua buah flow yang bisa digunakan untuk menampilkan elemen, yakni static dan non-static. Agar mudah memahami perbedaan antar keduanya, kita gambarkan sebuah halaman website dengan tampilan tiga dimensi.

Bayangkan kita memiliki tiga buat elemen div berukuran 200px x 200px yang masing-masing memiliki warna yang berbeda.

  1. .box {

  2.    width: 200px;

  3.    height: 200px;

  4. }

  5.  

  6. .first {

  7.    background-color: #60d0a8;

  8. }

  9.  

  10. .second {

  11.    background-color: #6495ed;

  12. }

  13.  

  14. .third {

  15.    background-color: #ffa500;

  16. }


Karena kita tidak mengatur properti position dari ketiga elemen tersebut, maka tiap elemen akan ditampilkan dengan static flow seperti ini:
20191206221017eed63307e1d442bf305a00d7012e83fe.jpeg
Ketika kita ingin mengubah letak kotak biru (kotak kedua) dengan menggunakan margin-top: 20px; tentu akan berpengaruh pada posisi elemen di bawahnya.

  1. .second {

  2.    background-color: #6495ed;

  3.    margin-top: 20px;

  4. }


201912062212001fdb59982b39e930a26e6a07fcb5e6c9.png
Pada ilustrasi di atas kita bisa lihat bahwa kotak yang berwarna oranye ikut bergeser ke bawah. Berbeda ketika kita menerapkan properti position yang dapat membuat elemen keluar dari static flow. Contohnya kita menerapkan properti position dengan nilai relatif.

  1. .second {

  2.    background-color: #6495ed;

  3.    position: relative;

  4. }


201912062214046584bac9ac55ab9c3ac2aba6cf7bf15b.png
Pada tampilan browser mungkin tidak terdapat perbedaan apapun setelah menerapkan nilai relative pada atribut position. Namun sebenarnya elemen yang menerapkannya akan diangkat dari luar static flow seperti yang ditampilkan pada ilustrasi 3D. Sehingga elemen tersebut dapat leluasa berpindah posisi tanpa mempengaruhi elemen yang berada pada static flow.
Untuk mengubah posisi elemen yang berada di non-static flow, kita dapat menggunakan properti toprightbottom, maupun left.

  1. .second {

  2.    background-color: #6495ed;

  3.    position: relative;

  4.    top: 30px;

  5.    left: 10px;

  6. }


201912062214376f42b33fe7daba6acb7680217e48b80d.png
Perlu kita ingat ya, bahwa properti topleftright dan bottom pada CSS hanya akan berpengaruh pada elemen yang menerapkan non-static flow (elemen yang menerapkan nilai relativeabsolute, dan fixed pada properti position)

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.