Position Parent element css
Dalam CSS, posisi elemen parent (induk) dapat mempengaruhi posisi elemen-anak yang berada di dalamnya. Properti-posisi CSS yang diberikan pada elemen parent akan mempengaruhi tata letak dan perilaku elemen-anaknya. Berikut ini adalah beberapa properti-posisi yang umum digunakan untuk mengatur posisi elemen parent:
Posisi Relatif (Relative Positioning):
Ketika elemen parent memiliki posisi relatif (position: relative;), maka anak-anaknya yang memiliki posisi absolut (position: absolute;) akan ditempatkan relatif terhadap elemen parent tersebut. Properti-posisi CSS seperti top, bottom, left, dan right pada elemen-anak yang memiliki posisi absolut akan dihitung relatif terhadap elemen parent dengan posisi relatif.
Posisi Tetap (Fixed Positioning):
Jika elemen parent memiliki posisi tetap (position: fixed;), elemen-anak yang memiliki posisi absolut akan ditempatkan relatif terhadap jendela penampilan (viewport) atau elemen parent dengan posisi tetap terdekat. Properti-posisi CSS seperti top, bottom, left, dan right pada elemen-anak akan dihitung relatif terhadap elemen parent dengan posisi tetap.
Posisi Sticky (Sticky Positioning):
Pada elemen parent dengan posisi sticky (position: sticky;), elemen-anak yang memiliki posisi absolut akan ditempatkan relatif terhadap elemen parent tersebut, tetapi akan tetap berada di tempatnya sampai elemen parent bergeser melewati batas yang telah ditentukan. Properti-posisi CSS seperti top, bottom, left, dan right pada elemen-anak yang memiliki posisi absolut akan dihitung relatif terhadap elemen parent dengan posisi sticky.
Posisi Statis (Static Positioning):
Posisi statis (position: static;) adalah posisi default untuk elemen. Elemen dengan posisi statis tidak terpengaruh oleh properti-posisi CSS dan akan mengikuti aliran dokumen normal. Pada posisi statis, elemen parent tidak memiliki pengaruh langsung terhadap posisi elemen-anak yang memiliki posisi absolut.
Jadi, posisi elemen parent dalam CSS dapat mempengaruhi posisi elemen-anaknya, tergantung pada jenis posisi yang diberikan pada elemen parent dan bagaimana properti-posisi CSS diatur pada elemen-anak yang memiliki posisi absolut.
