CSS Positioning

CSS positioning memungkinkan anda untuk mengatur dan memanipulasi posisi elemen. Dengan kata lain kita dapat menempatkan sebuah elemen dibelakang elemen lain. Elemen dapat diposisikan menggunakan bagian atas, bawah, kiri, dan sifat yang tepat. Namun, sifat ini tidak akan bekerja kecuali properti posisi diatur terlebih dahulu. Mereka juga bekerja tergantung pada metode penentuan posisi. Ada empat metode penentuan posisi yang berbeda. 



Positioning statis / Static

Elemen HTML diposisikan statis merupakan posisi  secara default. Unsur yang diposisikan statis selalu diposisikan sesuai dengan aliran normal halaman. Elemen diposisikan statis tidak terpengaruh oleh bagian atas, bawah, kiri, dan sifat yang tepat. 



Positioning tetap / Fixed

Sebuah elemen dengan posisi tetap diposisikan relatif terhadap jendela browser. Ini tidak akan bergerak bahkan jika jendela menskroll ke bawah


p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}


Catatan: Internet Explorer akan mendukung nilai tetap/ fixed, jika DOCTYPE ditentukan!. ELemen fixed dapat diposisikan tumpang tindih terhadap elemen lainnya. 



Positioning Relatif 

Sebuah elemen relatif diposisikan relatif terhadap posisi normal.


h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}


Elemen relatif sering digunakan sebagai blok kontainer untuk elemen fixed / absolute.



Positioning Absolute 

Sebuah elemen posisi absolut diposisikan relatif terhadap elemen induk pertama yang memiliki posisi selain statis. 


h2
{
position:absolute;
left:100px;
top:150px;
}


Elemen absolute diposisikan diluarkan dari aliran normal.  Elemen absolute dapat diposisikan tumpang tindih terhadap elemen lainnya. 



Elemen Tumpang Tindih / Overlaping

Ketika elemen diposisikan di luar aliran normal, mereka dapat tumpang tindih elemen lainnya. Properti z-index menentukan urutan tumpukan elemen (elemen yang harus ditempatkan di depan, atau di belakang, yang lain). Sebuah elemen dapat memiliki setumpuk urutan positif atau negatif:


p{
  position:absolute;
  left:0px;
  top:0px;
  z-index:-1
}
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda