Css Position

Published by Concept Phone Rabu, 22 Agustus 2018

Perkenalan

Pernahkah kalian melihat elemen yang tampak saling bertumpukan, melayang, atau tampak keluar dari garis batas? Itu semua dibentuk memakai CSS Position. Ada empat posisi elemen dalam CSS: Static, Relative, Absolute dan Fixed. Selain deklarasi posisi, terdapat pula beberapa properti yang biasanya dituliskan bersama dengan deklarasi posisi menyerupai top, right, bottom, left dan z-index.

top, right, bottom dan left yaitu koordinat posisi. Saat kita menambahkan nilai koordinat pada posisi yang sesungguhnya, maka elemen akan bergeser sesuai dengan besar nilai koordinat.

top, right, bottom dan left berbeda dengan margin-top, margin-right, margin-bottom dan margin-left. Nilai margin difokuskan kepada jarak elemen terhadap elemen lainnya, sedangkan nilai koordinat lebih difokuskan kepada offset posisi elemen dari kawasan asalnya.

z-index yaitu urutan tumpukan. Saat kita mendeklarasikan position:absolute, maka kemungkinan yang terjadi yaitu elemen akan bertumpuk di sebelah atas elemen atau di bawah elemen. Jika yang terjadi yaitu yang ke dua, maka untuk mengangkatnya, kita harus mendeklarasikan z-index dengan nilai yang lebih besar dari 1.

Static

Ini yaitu posisi sebenarnya. Mendeklarasikan position:static sama saja dengan tidak mendeklarasikan CSS Posisi.

Relative

Mendeklarasikan position:relative pada elemen secara kasat mata tidak akan mengubah apapun, namun kita sanggup menerapkan koordinat posisi dan urutan tumpukan pada tipe posisi ini.

Absolute

Mendeklarasikan position:absolute pada elemen akan benar-benar tetapkan anutan elemen dari kawasan asalnya dan menciptakan elemen bertumpuk dengan elemen lainnya.

Fixed

Mendeklarasikan position:fixed pada elemen akan benar-benar tetapkan anutan elemen dari kawasan asalnya dan menciptakan elemen bertumpuk dengan elemen lain. Kelebihan penerapan posisi ini yaitu akan menciptakan elemen tampak melayang dan tidak terpengaruh gerakan scroll bar.

Respon Peramban

Harap perhatikan juga bahwa respon peramban terhadap penerapan koordinat posisi relative pada elemen akan berbeda dengan posisi absolute dan fixed. Mendeklarasikan koordinat pada posisi relative akan menggeser elemen menurut posisi asalnya, berbeda dengan posisi absolute dan fixed yang akan dipindahkan posisinya menurut koordinat layar peramban. Seperti ini:

Respon posisi elemen terhadap layar peramban.

Contoh Deklarasi Relative	Contoh Deklarasi Absolute	Contoh Deklarasi Fixed
#area-1 {   position:relative;   top:10px;   left:20px;   z-index:10; }	#area-1 {   position:absolute;   top:10px;   left:20px;   z-index:10; }	#area-1 {   position:fixed;   top:10px;   left:20px;   z-index:10; }

Lihat Demo

Sumber https://www.dte.web.id/