Tutorial Penggunaan Position Relative dan Absolute Pada Html dan Css

 Mengenal Posistion Relative dan Absolute.

FreeLoad — Hallo sobat apa kabarnya semoga sehat selalu ya, pada kali ini saya akan Membuat Tutorial mengenai Position Absolute dan relative. Apa Itu Position ?

Position merupakan sebuah Properti yang terdapat pada Css untuk mengatur dan 

menetapkan posisi elemen pada HTML. 

    value pada properti Position mempunyai 4 value yaitu:

1. Static 
2. Relative
3. absolute
4. Fixed

tapi pada tutorial kali ini saya akan membahas mengenai  Value Relative dan absolute.

ketika kita membuat suatu element maka position defaultnya yaitu static. Ketika anda menggunakan posisi selain statik maka akan membuat sebuah elemen seolah olah berada pada dimensi dari elemen lain nya. 
elemen yang diberi position selain static bisa menggunakan properti  
top,

left,

bottom,

Right,

Position: Relative;

Pada umumnya Html yang menggunakan postion relative Akan terletak dengan posisi yang sama akan tetapi position relative ini bisa kita atur dengan menggunakan value Top, left, bottom. right . Berikut contoh kodingan nya.

<style>

        .kotak{

            width: 100px;

            height: 100px;

        }

        .satu{

            background-color: lightblue ;

        }

        .dua{

            background-color: rgb(47, 46, 46) ;

            position: relative;

        }

        .tiga{

            background-color: rgb(230, 210, 173) ;

        }

    </style>

    <div class="kotak satu"></div>

    <div class="kotak dua"></div>

    <div class="kotak tiga"></div>

1. Pada tahap pertama buat lah tiga div dengan masing masing kelasnya

2. Buat style disini saya menggunakan internal style.

3.Runing di browser kesayangan anda.

4. akan tampil tiga kotak Seperti gambar diatas.

5. disini saya menempatkan value relative pada div .dua yang berwarna hitam.

6. atur top, bottom, left, right nya maka akan tampak perbedaan nya contoh:

 .dua{

            background-color: rgb(47, 46, 46) ;

            position: relative;

            bottom:20px;

            left: 20px;

        }

ketika anda membuat 

botttom sebesar 20 px maka posisi div tersebut akan bergeser ke atas dari bawah sebesar 20 px dari posisi semula.

dan sebaliknya jika anda Membuat

top sebesar 20px maka posisi div tersebut akan bergeser dari atas ke bawah sebesar 20px  dari posisi semula. berikut gambarnya:

Gambar diatas ini merupakan hasil dari kodingan syntax di atas dimana position relative dengan value top sebesar 20px dan left 20px.

KESIMPULAN:

Ketika kita mengatur top right left dan bottom pada position relative posisi awal dari elemen tersebut masih tersedia.

Ketika kita memberi properti top: 0; dan left: 0; maka element tidak berubah posisinya.

Position: Absolute;

Absolute merupakan Value Pada position. Pada saat kita memberikan position absolute maka elemen tersebut akan naik satu dimensi lalu tempat yang kosong akan di isi dengan element yang berada dibawahnya 

contohnya

1 Buatlah  tiga div yang masing masingnya memiliki lebar dan tinggi yang sama. 

2. Pada div ke dua beri properti position dengan value Absolute.

<style>

        .kotak{

            width: 100px;

            height: 100px;

        }

        .satu{

            background-color: lightblue ;

        }

        .dua{

            background-color: rgb(47, 46, 46) ;

            width: 100px;

            position: absolute;     

        }

        .tiga{

            background-color: rgb(230, 210, 173) ;

        }

    </style>

    <div class="kotak satu"></div>

    <div class="pembungkus">

    <div class="kotak dua"></div>

    <div class="kotak tiga"></div>

Pada gambar diatas terlihat dua Kotak yang mana kotak dibawah tersebut pindah ke atas mengisi kotak yang kosong dan kotak no dua naik 1 element.

seperti inilah Analoginya:

Ketika kita ingin mengatur top, right, left, bottom pada position absolut maka ia akan memberi jarak sesuai dengan pembungkusnya, karena disini kita tidak membuat pembungkus daripada div tersebut maka defaultnya position tersebut akan menyesuaikan dengan body sebagai pembungkusnya.

Contohnya: 

kita beri bottom dan left value 0; maka posisi dua tadi berada di paling bawah pojok kiri dimana bottom body.

 .dua{

            background-color:#F8CBED ;

            width: 100px;

            position: absolute;  

            bottom: 0;  

            left: 0;

        }

Nah itu sedikit penjelasan mengenai position Absolute

Lalu, Bagaimana caranya jika kita ingin position tersebut tebungkus selain body ?

Caranya sangat mudah kita hanya membuat pembungkus baru seperti container

lalu pembungkus tersebut diberikan properti position dengan value relative.

Contohnya: 

saya sudah menyiapkan kodingan dimana saya membuat

1. div dengan nama class container sebagai pembungkus atau parent

2. membuat div dengan class kotak sebagai child daripada parent tersebut

3. beri lebar 50% pada container dengan tinggi 400px

4. beri lebar dan tinggi pada kotak sebesar 100px dengan background-color:orange; dengan position absolute

    <style>

        .container{

            width: 50%;

            height: 400px;

            border: 4px solid black;

            margin: 50px auto;

        }

        .kotak{

            width: 100px;

            height: 100px;

            background-color: orange;

            position: absolute;

        }

    </style>

    <div class="container">

        <div class="kotak"> 

        </div>

    </div>

Pada tahap ini belum ada terlihat perubahan, akan tetapi, jika anda memberi properti top:0; right right:0; Maka Element tersebut akan berada dipojok kanan atas keluar dari parent nya container. 

 .kotak{

            width: 100px;

            height: 100px;

            background-color: orange;

            position: absolute;

            top: 0px;

            right: 0px;

        }

 

Lalu bagaimana caranya agar tetap berada didalam Pembungkusnya ???

Caranya sangat mudah anda hanya perlu menambahkan properti position dengan value relative pada class container.

Contohnya:

<style>

        .container{

            width: 50%;

            height: 400px;

            border: 4px solid black;

            margin: 50px auto;

            position: relative;

        }

        .kotak{

            width: 100px;

            height: 100px;

            background-color: orange;

            position: absolute;

            top: 0px;

            right: 0px;

        }

    </style>

    <div class="container">

        <div class="kotak"> 

        </div>

    </div>

Maka posisi pada kotak tadi berada di pojok kanan atas dari kontainer tersebut.

Nah sekian dulu tutorial kali ini terimakasih sudah meluangkan waktu untuk membaca postingan ini, semoga postingan ini membantu pembaca dalam memahami position relative dan absolute. sampai jumpa