5 Css position property dan bagaimana cara menggunakan nya

Css positioning - apa kabar sahabat kirmandzgn, apakah kamu belum mengetahui bagaimana cara dan contoh penggunaan dari css position.

Css position elemen

Nah kemarin kita baru saja membahas pseudo elements pada css (elmen semu). Nah sekarang kita akan membahas position pada css. Untuk css position ini terbagi menjadi empat bagian yang terdiri dari:

1. Static

2. Relative

3. Fixed

4. Absolute

5. Sticky

Elemen tersebut kemudian diposisikan menggunakan properti atas, bawah, kiri, dan kanan. Namun, properti ini tidak akan berfungsi kecuali position properti ditetapkan terlebih dahulu. Mereka juga bekerja secara berbeda tergantung pada nilai posisi tersebut.

Dari ke 5 value peroperty position di atas memiliki fungsi fungsi yang berbeda dengan css antara 1, 2, 3, 4 dan 5 di atas tersebut. Nah untuk selanjutnya kita akan bahas di bawah ini:

1. Static

Elemen pada HTML diposisikan dengan statis, secara default Elemen posisi statis tidak dapatkan terpengaruh oleh properti atas, bawah, kiri, dan kanan.

Nah Elemen dengan position: static; tidak dapat diposisikan dengan cara khusus apa pun, position:static; selalu diposisikan sesuai dengan aliran normal halaman dari html tersebut. dan di bawah ini adalah contoh elements tanpa property "position"

<style>
  .static{
    background:red;
    width:200px;
    height:200px;
    
  }
</style>
<div class="static">
</div>

Sekarang kamu salin dan tempelkan pada html editor kamu > pertinjau, apa yang kamu lihat?. Pasti kamu melihat kotak berwarna merah di pojok kiri atas!

Untuk selanjutnya, kamu tambahkan property position: static; pada css tersebut seperti di bawah ini:

<style>
  .static{
    background:red;
    width:200px;
    height:200px;
    position: static; /*value static*/
  }
</style>
<div class="static">
</div>

Selanjutnya > pertinjau dan lihat apa yang kami lihat pastinya tidak ada perubahan sedikit pun kan!. Sekarang kamu paham atau sebaliknya, saya harapkan kamu paham.

Catatan:

Elements dengan css Position static tidak dapat di aturan dengan property top, right, bottom dan left. Dengan bahasa kita ialah tidak dapat di setel dengan property atas kanan bawah dan Kiri.

2. relative

Untuk position relative ialah tidak jauh berbeda dengan css position static, misalnya.

Jika suatu elemen dengan position: relative; dapat diposisikan relatif terhadap posisi normalnya.

Dengan position relative kita dapat Menyetel properti atas, kanan, bawah, dan kiri dari, elemen yang diposisikan relatif akan membuatnya jauh dari posisi normalnya. Dan element lain tidak akan disesuaikan agar sesuai dengan celah yang ditinggalkan oleh elemen dengan position relative tersebut.

<style>
  .kuning{
    background: yellow;
    width: 200px;
    height:200px;
    position: relative;
    top:200px;
  }
</style>
<div class="kuning">
  
</div>

Untuk contoh nya kamu pelajari markup di bawah ini dengan cara salin dan tempelkan di html editor kamu > pertinjau. Pastinya kamu akan melihat kotak berwarna kuning tergeser 200px dari atas layar perangkat kamu.

Catatan:

Property position: relative; dapat menggunakan peroperty: top, right, bottom, left hanya dengan value: px, em dan yang lainnya, contoh top:200px; bukan top:0;

3. Fixed

Elemen dengan position: fixed; telah diposisikan relatif terhadap viewport, yang berarti selalu berada di tempat yang sama bahkan jika halaman digulir.

Position: fixed; dapat di sesuaikan dengan Properti top, right, bottom, dan left sehingga dapat digunakan untuk memposisikan elemen.

Untuk contoh perhatikan markup di bawah ini dengan cara salin dan kemudian tempelkan di html editor kamu > pertinjau dan kemudian kamu gulir ke atas dan kebawah serta perhatikan kontak berwarna biru.

<style>
  *{
    height: 3000px;
    margin: 0;
    padding: 0;
    background: lightblue;
  }
  /*Lupakan css di atas ini adalah global supaya body tinggi 2000px*/
  .fixed{
    width: 200px;
    background: blue;
    height: 200px;
    position: fixed;
    left: 50%;
    top:50%;
    /*kamu dapat menambah right, dan sebagainya*/
  }
</style>
<div class="fixed">
  
</div>

Catatan:

Elemen dengan position:fixed; tidak meninggalkan celah sedikitpun di halaman di mana ia biasanya berada.

4. Absolute

Suatu elemen dengan position: absolute; dapat diposisikan relatif terhadap property element yang diposisikan terdekat (bukan diposisikan relatif terhadap viewport, seperti tetap).

Namun, jika elemen yang diposisikan mutlak tidak memiliki property yang diposisikan, ia menggunakan badan dokumen, dan bergerak bersama dengan pengguliran halaman.

Untuk contoh perhatikan markup di bawah ini dengan cara salin dan kemudian tempelkan di html editor kamu > pertinjau dan kemudian kamu gulir ke atas dan kebawah serta perhatikan kontak berwarna hijau.

<style>
  *{
    height: 3000px;
    margin: 0;
    padding: 0;
    background: lightblue;
  }
  /*Lupakan css di atas ini adalah global supaya body tinggi 2000px*/
  .absolute{
    width: 200px;
    background: green;
    height: 200px;
    position: absolute;
    left: 50%;
    top:50%;
    /*kamu dapat menambah right, dan sebagainya*/
  }
</style>
<div class="absolute">
  
</div>

Catatan:

Elemen position: absolute; tidaklah jauh bedanya dengan fixed, namun absolute ialah dapat di gulir daripada fixed dan Elemen dengan position absolute akan menagbil kedudukannya daripada static.

5. Sticky

Elemen dengan position: sticky; dapat diposisikan berdasarkan posisi gulir pengguna.

Elemen sticky (lengket) ialah berganti-ganti antara relative dan fixed, tergantung pada posisi gulir. Ini diposisikan relatif sampai posisi offset tertentu bertemu di viewport - lalu "menempel" di tempatnya (seperti posisi: fixed).

Untuk contoh perhatikan markup di bawah ini dengan cara salin dan kemudian tempelkan di html editor kamu > pertinjau dan kemudian kamu gulir ke atas dan kebawah serta perhatikan kontak berwarna oren.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
<style>
.sticky {
  position: -webkit-sticky; /*safari*/
  position: sticky;/*global*/
  top: 0;
  left:10%;
  width:80%;
  height:50px;
  background:orange;
}
</style>
<div style="height:2000px; width:100%; background: lightblue;">
</div>
<div class="sticky">
</div>
<div style="height:2000px; width:100%; background: lightblue;">

Catatan:

Dalam contoh ini, elemen lengket menempel ke bagian atas halaman atas dengan nilai nol ( top: 0), ketika element mencapai posisi gulirnya.

Nah untuk pembahasan elements position pada css, dan saya harapkan bila kamu suka dengan artikel dan bisa membantu kamu, dan jika ada baiknya kamu bertanya bila tidak ada yang kamu pahami, terimakasih.