Mengatur posisi atau position elemen dengan CSS

Pada CSS Anda bisa mengatur letak posisi setiap elemen, ini sangat berguna untuk desain tata letak ya

Kegunaan position pada CSS

Pada CSS sendiri Anda bisa mengatur letak posisi setiap elemen, ini sangat berguna untuk desain tata letak yang baik. Didalam CSS ada beberapa metode yang bisa Anda gunakan untuk menentukan posisi elemen dengan properti position. Pada properti position Ada lima nilai yang bisa Anda gunakan:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Agar berfungsi Anda juga perlu mengatur arah posisi yang lebih spesifik dengan properti: top, right, bottom dan left, mereka juga bekerja secara berbeda tergantung pada nilai posisi.

Informasi: position jika ditranslate ke bahasa Indonesia berarti posisi.

Posisi static

Elemen HTML secara default diposisikan static. Posisi static tidak diposisikan dengan cara khusus apa pun, melainkan diposisikan sesuai dengan aliran normal halaman. Elemen posisi static tidak bisa dipengaruhi oleh properti top, right, bottom dan left.

div {
    border: 2px solid blue;
    position: static;
}

Posisi relative

Elemen dengan posisi relative diposisikan relative terhadap posisi normalnya. Dengan posisi relative Anda bisa mengatur letak posisi dengan properti top, right, bottom dan left. Elemen yang diposisikan relative dapat tumpang tindih dengan elemen lain, dan menjaga ruang yang awalnya disediakan dalam aliran normal.

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

Posisi absolute

Elemen dengan posisi absolute diposisikan sepenuhnya keluar dari aliran normalnya. Dengan posisi absolute Anda bisa mengatur letak posisi dengan properti top, right, bottom dan left. Elemen yang diposisikan absolute dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.

Jika posisi absolute dibungkus dengan posisi relative, maka akan mengikuti posisi kordinat dari pembungkusnya (relative). Namun jika posisi absolute tidak memiliki pembungkus yang mempunyai posisi relative, maka ia menggunakan elemen <body> sebagai kordinatnya.

Contoh posisi absolute yang dibungkus dengan posisi relative:

#relative {
    background-color: grey;
    position: relative;
    width: 80%;
    height: 300px;
}
#absolute {
    background-color: yellow;
    position: absolute;
    top: 50px;
    left: 100px;
    width: 40%;
    height: 100px;
}

Contoh posisi absolute yang TIDAK dibungkus dengan posisi relative:

#container {
    background-color: yellow;
    width: 80%;
    height: 300px;
}
#absolute {
    background-color: lightgrey;
    position: absolute;
    top: 50px;
    left: 100px;
    width: 40%;
    height: 100px;
}

Posisi fixed

Elemen dengan posisi fixed digunakan untuk memberikan posisi tetap bahkan jika halaman tersebut digulir. Dengan posisi fixed Anda bisa mengatur letak posisi dengan properti top, right, bottom dan left. Elemen yang diposisikan fixed dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.

#fixed {
    background-color: red;
    position: fixed;
    left: 70px;
    width: 50%;
    height: 100px;
}

Posisi sticky

Elemen dengan posisi sticky digunakan untuk toggle posisi relative dan posisi fixed. Ini diposisikan relatif sampai posisi offset yang diberikan bertemu di viewport – kemudian “sticky” di tempatnya. Dengan posisi sticky Anda bisa mengatur letak posisi dengan properti top, right, bottom dan left. Elemen yang diposisikan sticky dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.

#sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 15px;
    background-color: lightgrey;
    border: 3px solid blue;
}

Jangan lupa menentukan properti position, jika tidak sticky tidak akan berjalan.

Informasi: Internet Explorer, Edge 15 dan browser versi yang lebih lama tidak mendukung penentuan posisi sticky. Safari membutuhkan awalan -webkit- agar berfungsi.

Posisi elemen tumpang tindih

Ketika elemen diposisikan, maka mereka dapat tumpang tindih dengan elemen yang lainnya. Dengan properti z-index Anda bisa mengatur untuk menentukan elemen mana yang akan ditempatkan dibelakang dan elemen mana yang akan ditempatkan didepan.

p {
    position: absolute;
    left: 10px;
    top: 10%;
    z-index: -1;
    background-color: red;
}

Nilai properti z-index mendukung nilai positif atau negatif. Elemen dengan urutan tumpukan lebih besar selalu didepan elemen dengan urutan tumpukan lebih rendah. Jika dua elemen yang diposisikan tumpang tindih tanpa properti z-index yang ditentukan, elemen yang diposisikan terakhir dalam kode HTML akan ditampilkan di atas.

Daftar properti position

PropertiKegunaanya
positionMengatur jenis posisi pada elemen
topMenentukan posisi sebelah atas
rightMenentukan posisi sebelah kanan
bottomMenentukan posisi sebelah bawah
leftMenentukan posisi sebelah kiri
z-indexMengatur susunan elemen