Mengenal Fungsi Properti Css Position

Setelah kemarin kita membahas mengenai properti Css Float kali ini kami akan membahas tentang properti css Position, fungsinya adalah untuk menentukan lokasi atau posisi sebuah element, untuk valuenya terdiri dari (Static, Relative, Fixed, Absolute, Sticky), Mari kita bahas satu persatu 

Static

Value ini memberikan posisi default, artinya tidak terpengaruh oleh properti apapun, hanya memberikan posisi normal, jika anda memberikan properti left, right, top, bottom

Contoh :

 <p>pembuatan artikel mengenal fungsi properti css position
  contoh penggunakan properti css
 </p>
 <div style="position:static; border:solid 1px #FF0000">
  Mengenal Fungsi Properti Css Position
 </div>

Hasil :

Fixed

Fixed artinya adalah Tetap, jadi value ini akan memberikan efek tetap, artinya element yang menggunakan properti ini akan posisinya akan tetap sesuai dengan setingan style anda, tidak akan terpengaruh oleh Scroll, untuk menempatkan element sesuai dengan keinginan anda bisa menggunakan properti lain seperti Left, Right, Top, Bottom, Margin, dll.

Contoh :

 <p>pembuatan artikel mengenal fungsi properti css position
 contoh penggunakan properti css
  </p>
 <div style="position:fixed; margin-left:30%; border:solid 1px #FF0000; width:300px">
  Mengenal Fungsi Properti Css Position
 </div>

Absolute

Element yang bervalue absolut, element itu akan bisa mengapung diatas element lainya, tetapi value ini akan terpengaruh dengan Scroll,  anda bisa menggunakan properti lainya seprti margin dll, tidak terpengaruh dengan element utama.

contoh :

 <p>pembuatan artikel mengenal fungsi properti css position
  contoh penggunakan properti css
 </p>
 <div style="position:absolute; margin-top:-20px; border:solid 1px #FF0000; width:300px">
  Mengenal Fungsi Properti Css Position
 </div>

 hasil :

Relative

value ini akan memberikan posisi relatif, artinya value ini hampir mirip dengan Static hanya saja value ini bisa di atur menggunakan Left, Right, Top, Bottom, dll.

 <p>pembuatan artikel mengenal fungsi properti css position
  contoh penggunakan properti css
 </p>
 <div style="position:relative; border:solid 1px #FF0000; width:300px">
  Mengenal Fungsi Properti Css Position
 </div>

• Twitter
• Facebook
• Google Plus

• mengenal fungsi properti css position
• css
• properti position css
• css position