Home › css › Belajar mengatur posisi elemen pada css

Belajar mengatur posisi elemen pada css

Hendky( diperbaharui: 20-October-2020 ) 0
belajar css
Share:
whatsapp
pinterest
linkedin

Metode posisi 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 property position. Pada property position Ada lima nilai posisi yang bisa Anda gunakan:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Agar berfungsi Anda juga perlu mengatur arah posisi yang lebih spesifik dengan property: top, right, bottom dan left, mereka juga bekerja secara berbeda tergantung pada nilai 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 property top, right, bottom dan left.

Contoh:

Editor Online
  1. div {
  2. border: 2px solid blue;
  3. position: static;
  4. }

Posisi relative

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

Contoh:

Editor Online
  1. #relative {
  2. background-color: yellow;
  3. position: relative;
  4. top: 20px;
  5. left: 100px;
  6. width: 30%;
  7. height: 80px;
  8. }

Posisi absolute

Elemen dengan posisi absolute diposisikan sepenuhnya keluar dari aliran normalnya. Dengan posisi absolute Anda bisa mengatur letak posisi dengan property 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:

Contoh:

Editor Online
  1. #relative {
  2. background-color: grey;
  3. position: relative;
  4. width: 80%;
  5. height: 300px;
  6. }
  7. #absolute {
  8. background-color: yellow;
  9. position: absolute;
  10. top: 50px;
  11. left: 100px;
  12. width: 40%;
  13. height: 100px;
  14. }

Contoh posisi absolute yang TIDAK dibungkus dengan posisi relative:

Contoh:

Editor Online
  1. #container {
  2. background-color: yellow;
  3. width: 80%;
  4. height: 300px;
  5. }
  6. #absolute {
  7. background-color: lightgrey;
  8. position: absolute;
  9. top: 50px;
  10. left: 100px;
  11. width: 40%;
  12. height: 100px;
  13. }

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 property 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.

Contoh:

Editor Online
  1. #fixed {
  2. background-color: red;
  3. position: fixed;
  4. left: 70px;
  5. width: 50%;
  6. height: 100px;
  7. }

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 property 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.

Contoh:

Editor Online
  1. #sticky {
  2. position: -webkit-sticky;
  3. position: sticky;
  4. top: 0;
  5. padding: 15px;
  6. background-color: lightgrey;
  7. border: 3px solid blue;
  8. }

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

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 property z-index Anda bisa mengatur untuk menentukan elemen mana yang akan ditempatkan dibelakang dan elemen mana yang akan ditempatkan didepan.

Contoh:

Editor Online
  1. p {
  2. position: absolute;
  3. left: 10px;
  4. top: 30%;
  5. z-index: -1;
  6. background-color: red;
  7. }

Nilai property 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 property z-index yang ditentukan, elemen yang diposisikan terakhir dalam kode HTML akan ditampilkan di atas.

Daftar property position

PropertyKegunaanya
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

Leave a Reply

Your email address will not be published. Required fields are marked *