Cara membuat dan memahami CSS Position

Properti CSS position seperti namanya berguna untuk menentukan jenis metode penentuan posisi yang digunakan element,properti ini terdiri dari static,relative,absolute,fixed dan sticky. Perbedaan dari setiap position tersebut seperti berikut:

Yang Pertama adalah position: static;,element dengan posisi ini akan diposisikan secara default.Element dengan posisi ini tidak terpengaruh dengan properti top,left,right dan bottom.Karena element dengan posisi ini tidak diposisikan secara khusus.Selalu diposisikan sesuai dengan normal flow dari sebuah halaman.

Yang kedua adalah position:relative,jika sebuah element dengan posisi relative,maka element itu diposisikan relative di posisi normalnya.Dengan mengatur properti top,left,right, dan bottom dari element yang memiliki posisi relative,makan akan menyebabkan element itu bergeser dari posisi normalnya.

element dengan posisi relative

.box-relative {
            position: relative;
            display: flex;
            border: 2px solid #000;
            background-color: #fff;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
 }

Maka hasilnya akan seperti gambar berikut:

Jika ditambahkan properti top atau left atau right atau bottom makan akan seperti:

Dengan tambahan top:50px;,dan begitupun dengan properti lainnya,akan bergeser dari propertinya,jika top yang digunakan akan bergeser dari atas,jika left yang digunakan akan bergeser dari kiri,jika bottom yang digunakan akan bergeser dari bawah,dan jika right yang digunakan makan akan bergeser dari kanan.Properti ini bisa digabungkan contohnya seperti berikut:

.box-relative {
            position: relative;
            display: flex;
            border: 2px solid #000;
            background-color: #fff;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
}	

Yang ketiga yaitu position: absolute;,sebuah element yang diposisikan absolute akan diposisikan relative terhadap parent yang memiliki posisi relative,bukan diposisikan relative terhadap viewport.Namun jika element dengan posisi absolute tidak memiliki parent,maka element itu akan menggukan badan dokumen sebagai parentnya.Dan juga element dengan posisi absolute akan dari normal flow dan element dapat tumpang tindih.

<div class="box-relative">
            <p>element &lt;div&gt; ini memiliki posisi relative</p>
            <div class="absolute-content">
                <p>element &lt;div&gt; ini memiliki posisi absolute</p>
            </div>
</div>

.box-relative {
position: relative;
border: 2px solid #000;
background-color: #fff;
width: 500px;
height: 500px;
top: 50px;
left: 50px;
}

.absolute-content {
position: absolute;
bottom: 100px;
left: 30px;
border: 2px solid #000;
background-color: #fff;
width: 150px;
height: 150px;
}

Maka hasilnya akan seperti gambar berikut:

Selain dengan px,bisa juga dengan satuan lain seperti px,vh,vw,rem dan em.Ada juga trik untuk membuat element dengan posisition absolute selalu berposisi di tengah element parent baik secara horizontal maupun vertical,caranya tinggal menambahkan properti transform: translateY(-50%) translateX(-50); atau salah satu sesuai kebutuhan,contohnya seperti berikut

.absolute-content {
            position: absolute;
            top: 50%;
            left: 50%;
            border: 2px solid #000;
            background-color: #fff;
            width: 150px;
            height: 150px;
            transform: translateY(-50%) translateX(-50%);
 }

Dengan trik ini element juga akan terus ditengah di resolusi berapapun.

Yang keempat adalah pisition:fixed;,element dengan posisi fixed akan diposisikan relative terhadap viewport,yang berati akan selalu ditempat yang sama bahkan ketika halaman discroll.Sama seperti relative,dan absolute properti top,left,right, dan bottom bisa digunakan pada posisi ini.Dengan posisi ini element tidak akan meninggalkan celah di halaman tempat element itu berada.

<div class="wrapper">
        <div class="content-fixed">
            <p>element &lt;div&gt; fixed</p>
        </div>
        <div class="another-element"></div>
        <div class="another-element"></div>
</div>

.another-element {
width: 100%;
height: 100vh;
background-color: blue;
}

another-element:last-child {
background-color: red;
}

.content-fixed {
position: fixed;
display: flex;
padding: 0 30px;
align-items: center;
top: 0;
right: 0;
width: 150px;
height: 50px;
border: 2px solid #000;
background-color: #fff;
}

Maka hasilnya akan seperti gambar berikut:

Sebelum di scroll

Setelah di scroll

Yang kelima yaitu posisition: sticky;,element dengan posisi ini akan diposisikan berdasarkan posisi scroll user.Element ini beralih antara relative dan fixed,tergantung posisi scroll.Element akan diposisikan relative sampai posisi offset yang diberikan terpenuhi di viewport,jika sudah terpenuhi element akan menempel di tempatnya sama seperti posisi fixed.

<div class="wrapper">
        <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h3>
        <div class="sticky-element">
            <span>Sticky Element</span>
        </div>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis autem dolores nihil ex est alias molestias, aperiam libero nesciunt neque deserunt, totam tempora voluptates corporis. Veniam aliquam dignissimos nemo. Ipsam!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, incidunt esse beatae iure reiciendis nihil corporis voluptas soluta facere officiis tempora est dolores modi, minus sunt nisi et illo numquam.
        </p>
</div>

.wrapper {
position: relative;
padding: 0 20px;
width: 400px;
height: 200px;
overflow: auto;
border: 2px solid #000;
}
.sticky-element {
position: sticky;
top: 0;
padding: 20px;
border: 2px solid #000;
background-color: #fff;
}

Maka hasilnya akan seperti gambar berikut:

Sebelum di scroll

Setelah di scroll

Posisi sticky juga bisa ditambahkan properti top,left,right dan bottom seperti posisi relative,absolute, dan fixed.