Position CSS

Dengan skill position CSS maka kamu akan bisa memodifikasi posisi dari semua element HTML. Beberapa keistimewaan menggunakan CSS dibandingkan menggunakan HTML ataupun JavaScript untuk positioning yaitu penulisan code yang lebih mudah dan web loading yang lebih cepat.

Position relative

Position relative disini maksudnya adalah kita bisa menentukan posisi suatu element HTML yang baru berdasarkan posisinya yang normal. Misalkan saja kita memiliki header yang tampil disebelah kanan atas dari web kita maka kita bisa memindahkannya sedikit ke kiri ataupun ke bawah berdasarkan posisi awalnya.

Code CSS position relative:

h3 {
position: relative;
top: 15px;
left: 150px;
}
p {
position: relative;
left: 50px;
}

Untuk menentukan ke arah mana kita menggeser sebuah element HTML maka kita hanya perlu menggunakan dua arah yaitu left dan right. Gunakan petunjuk berikut untuk arah:

  • Menggeser ke kiri – gunakan nilai negative left
  • Menggeser ke kanan – gunakan nilai positif left
  • Menggeser ke atas – gunakan nilai negatif top
  • Menggeser ke bawah – gunakan nilai positif top

Sebelum diberi code CSS:

Header3

Header diatas akan bergeser ke bawah 15 px dan ke kanan 150 px. Paragraph ini akan bergeser kekanan 50 px.

Setelah diberi code CSS:

Header3

Header diatas akan bergeser ke bawah 15 px dan ke kanan 150 px. Paragraph ini akan bergeser kekanan 50 px.

Maksud dari position relative adalah bergeser dari posisi awal. Misal suatu code position relative left: 10 px adalah bergeser 10 px kekanan dari posisi awalnya.

Position absolute

Dengan position absolute Kita bisa menggeser element HTML dari posisinya semula yaitu disebelah pojok kiri atas.

Code CSS absolute positioning

b{
position: absolute;
top: 10px;
left: 30px;
}

Sebelum diberi code CSS:

text bold

Setelah diberi code CSS:

text bold

Ingatlah bahwa kalau kamu menggunakan position absolute maka posisi awalnya adalah selalu di pojok kiri atas.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>