CSS Layouting – Position absolute dan relative

Melanjutkan bahasan css layouting, postingan sebelumnya sudah di singgung mengenai posisi absolut dan relative. Untuk yang awam mungkin masih bingung terkait perkara ini, namun apabila kita terus menggalinya dengan mempraktekannya maka lambat laun akan menemukan titik terang.

Apa fungsi dari position, position berguna untuk membantu kita dalam mengatur letak sebuah elemen dalam halaman html seperti pada gambar ilustrasi dibawah.

css-position

Ada beberapa macam nilai dari position, seperti static, absolute, relative dan fixed. pada gambar diatas posisi masing-masing bawaan adalah static atau bawaan default elemen dalam sebuah halaman, elemen terlihat berurut dari atas kebawah.

Namun bagaimana untuk membuat halaman dengan posisi elemen seperti berikut.

css-position-absolute-relative

Hal ini tidak bisa dilakukan dengan nilai static, jadi gunakan nilai posisi yang lain. Mari kita coba dengan nilai absolute dan relative.

Coba kita praktekan dengan menggunakan kode html berikut.

<html>
    <head>
        <title>CSS - Layouting</title>
        <style>
        body {
            background-color: yellow;
            padding: 0;
            margin: 0;
        }
        
        header {
            background-color: pink;
            margin: 10px;
            padding: 10px;
        }
        
        nav {
            background-color: red;
            margin: 10px;
            padding: 10px;
        }
        
        footer {
            background-color: orange;
            margin: 10px;
            padding: 10px;
        }
        </style>
    </head>
    <body>
        <header>Header</header>
        <nav>Navigation</nav>
        <footer>Footer</footer>
    </body>
</html>

Hasil Output

css-postion-001

Sekarang kita coba modifikasi kode pada bagian berikut

        footer {
            background-color: orange;
            margin: 10px;
            padding: 10px;
            position: absolute;
        }

Hasil output

css-postion-002

Bagian footer lebarnya menjadi tidak sama dengan parentnya.  Nilai absolute biasanya di barengi dengan atribut top, left, right, bottom.  untuk mencobanya kita ubah kode berikut.

        footer {
            background-color: orange;
            margin: 10px;
            padding: 10px;
            position: absolute;
            top: 0;
        }

Hasil Output.

css-postion-003

Setelah diberi atribut top 0, maka footer menjadi posisi atas, menutupi header. Silahkan di coba dengan atribut left, right, dan bottomnya.

jadi position absolute bisa mengabaikan atau tidak berhubungan dengan div yang mewadahinya. contoh lain adalah kode berikut.

<html>
    <head>
        <title>CSS - Layouting</title>
        <style>
        .box-1 {
            width: 500px;
            height: 500px;
            background: #faa;
            margin: 50px 0;
        }
        
        .box-2 {
            width: 400px;
            height: 400px;
            background: #fbb;
            margin: 50px 0;
        }
        
        .box-3 {
            width: 300px;
            height: 300px;
            background: #fcc;
            margin: 50px 0;
        }
        
        .box-4 {
            width: 200px;
            height: 200px;
            background: #fdd;
        }
        
        body, .box-1, .box-2, .box-3, .box-4 {
            display: flex;
            justify-content: center;
        }
        </style>
    </head>
    <body>
        <[hapus]div class="box-1">
            <[hapus]div class="box-2">
                <[hapus]div class="box-3">
                      <[hapus]div class="box-4">
                      </div>        
                </div>        
            </div>        
        </div>
    </body>
</html>

Hasil output.

css-postion-004

box-4 adalah kotak yang ditengah.

.box-4 {
    width: 200px;
    height: 200px;
    background: #fdd;
    position: absolute;
    top: 0;
}

Hasil output.

css-postion-005

perubahannya adalah box-4 keluar dari wadahnya box-3, menjadi ke bagian body.

script diubah lagi menjadi berikut.

.box-1 {
    width: 500px;
    height: 500px;
    background: #faa;
    margin: 50px 0;
    position: absolute;
}

bisa dilihat perubahan layout, box-4 di wadahi oleh box-1 yang memiliki property position absolute;

css-postion-006

Sekarang untuk memperlihatkan perbedaan dengan relative, coba dengan kode berikut.

<html>
<head>
<title>CSS - Layouting</title>
<style>
.box-1 {
width: 500px;
height: 500px;
background: #faa;
margin: 50px 0;
}

.box-2 {
width: 400px;
height: 400px;
background: #fbb;
margin: 50px 0;
}

.box-3 {
width: 300px;
height: 300px;
background: #fcc;
margin: 50px 0;
}

.box-4 {
width: 200px;
height: 200px;
background: #fdd;
left: 0;
position: relative;
}

body, .box-1, .box-2, .box-3, .box-4 {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<[hapus]div class="box-1">
<[hapus]div class="box-2">
<[hapus]div class="box-3">
<[hapus]div class="box-4">
</div> 
</div> 
</div> 
</div>
</body>
</html>

Hasil Ouput.

css-postion-007

dapat dilihat box-4 bergeser kanan karena property left: 100px; relative dan left akan berperngaruh dan berada dalam posisi div wadahnya yang terdekat seperti contoh kode diatas. kalau diisi absolute maka posisi div ke div body.

semoga bermanfaat, wassalam.

Bersambung …

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s