Properti Position dan Tata Letak Halaman ~ Pemrograman dan Teknologi

Untuk mengatur posisi tampilan elemen HTML kalian akan memerlukan properti position. Properti position digunakan untuk menentukan cara penyusunan elemen HTML. Properti ini bisa punya nilai-nilai berikut.

Relative : posisi semua elemen yang terlihat di halaman HTML susunannya mirip dengan teks, dan diletakkan sesuai urutannya dalam kode HTML.
Absolute : Posisi ditentukan berdasarkan koordinat di halaman HTML.
Fixed : Posisi ditentukan berdasarkan koordinat "viewport" browser. Posisi akan menetap walaupun discroll.
Sticky : Campuran dari fixed dan relative. Posisi awal elemen adalah relative. Elemen HTML akan menetap (fixed) setelah discroll melebihi posisinya.

Saat menggunakan nilai relative, kalian bisa menggunakan margin untuk mengatur posisi elemen HTML. Untuk nilai lainnya, kalian perlu menggunakan properti selain margin.

Penentuan Posisi Elemen HTML.

Selain saat position bernilai relative, kalian bisa menggunakan properti-properti di bawah ini.

z-index : letak berdasarkan urutan layer / lapisan.
left : letak dari sisi kiri window, parent, atau sibling tergantung nilai position.
top : letak dari sisi atas window, parent, atau sibling tergantung nilai position.
right : letak dari sisi kanan parent jika properti left bernilai auto. Properti right tidak bisa digunakan bersamaan dengan left.
bottom : letak dari sisi bawah parent jika properti top bernilai auto. Properti bottom tidak bisa digunakan bersamaan dengan top.

Berikut ini contoh kode HTML yang menggunakan properti top, left dan position.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <style>
    	body div {
            color : red;
            border : dotted 1px orange;
            width : auto;
            height : auto;
            box-sizing : border-box;
            padding : 4px;
    	}
        .menetap{
            width:320px;
            height:80;
            background : green;
            position: sticky;
            top:0px;
            left:0px;
            z-index:99;
        }
        
        .kontainer{
            width : 320px;
            height : 100%;
            background : orange;
            top : 0%;
            left : 0px;
            position : relative;
            overflow : auto;
        }

        .styleku1{
            background : gold;
            position : absolute;
            left : 5%;
            top : 240px;
            width : 90%;
        }

        .styleku2{
            background : lime;
            position : relative;
            margin-top : 10px;
            margin-left : 10px;
            margin-right : 10px;
        }

    </style>
</HEAD>
<BODY>  
    <div class="menetap">
        <h2>Fixed</h2>
    </div>
    <Div class="kontainer">
        <div class="styleku1">
            <p>
                Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. Ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian pertama.
            </p>
        </div>

        <div class="styleku2">
            <p>
                Ini adalah kalimat ke-1. Ini adalah kalimat ke-2. ini adalah kalimat ke-3. Ini adalah kalimat ke-4. Ini adalah bagian ke-2.
            </p>
        </div>
    </div>
</BODY>
</HTML>

Kalau kalian menggunakan browser jadul, nilai sticky pada properti position tidak akan berguna sebagaimana seharusnya. Kalau kalian pakai firefox, pastikan kalau tag lain di bawah tag yang menggunakan sticky memiliki position relative, karena sesuatu yang tidak sesuai harapan mungkin saja terjadi kalau nilai properti position dari tag di bawahnya adalah absolute.

Sticky seharusnya membuat posisi suatu tag menjadi "relative" sebelum discroll. Jika sudah discroll sampai melewati nilai properti yang terkait dengan posisi (seperti top, left, right, dan bottom); posisinya akan menetap menyesuaikan posisi dari nilai top, left, right, dan bottom.