CSS position - Menentukan posisi dengan kode CSS

Static

Elemen HTML secara default akan diposisikan static. Tidak perlu repot menulisnya lagi.



Fixed

Ini akan membuat sebuah elemen dengan posisi tetap. Walaupun jendela browser anda scroll jauh kebawah, ia akan tetap muncul.


Buka Notepad, dan copy-paste :

<html>
<head>
<style type="text/css">
body{
height:1500px;
}
p .contoh{
position:fixed;
right:5px;
}
</style>
</head>
<body>
<p class="contoh">Contoh posisi fixed. Coba scroll kebawah !</p>
<p style="margin-top:5%;">Biar terlihat beda...</p>
<p style="margin:80% 0;">Beda banget...</p>
<p style="margin-bottom:5%;">Banget beda</p>
</body>
</html>

Save As dengan ekstensi file .html atau .htm , dan lihat hasilnya !.



Relative

Elemen diposisikan relatif dari posisinya normalnya.


Contoh :

p{
position:relative;
left:-18px;
}

Jadinya akan seperti ini...


Dan bedakan :

p{
left:-18px;
}

Jadinya akan seperti ini tanpa posisi relatif...



Absolute


Contoh :

p{
position:absolute;
}

Jadinya akan seperti ini...

Tidak diberi baris jeda...


Saling tumpang tindih jika tidak diposisikan dengan benar. Nano akan coba tambahkan baris jeda :

Jadinya akan seperti ini...


Diberi baris jeda...



Posisi top, bottom, right, dan left

Nano tulis singkat saja. Pada dasarnya mereka bersifat auto. Contoh Nano tulis seperti ini :

p{
position:absolute;
top:0px;
}

Dia akan berada di atas. Jika anda ganti dengan ukuran 10px, akan memberi ruang 10px dari atas. Semuanya juga begitu tergantung nama properti.


Pada posisi static tidak akan berpengaruh !.



Clip

Ini bisa untuk memotong sebuah gambar.


sebelumnya :

profil Nano Yulianto

Buka Notepad, copy-paste kode ini untuk lihat sesudahnya :

<html>
<head>
<style type="text/css">
img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}
</style>
</head>

<body>
<img src="http://3.bp.blogspot.com/_NUTOdYaT1os/TMZWBDv2lLI/AAAAAAAABvs/ZsD8Kvm4pa4/S220/65.JPG" />
</body>
</html>

Save As seperti biasanya, dan lihat !.



z-index

Properti z-index untuk menentukan urutan tumpukan.


Contoh :

p .bg{
width:50%;
background:yellow;
position:absolute;
z-index:-1;
}
p .tk{
width:30%;
background:black;
color:yellow;
margin-left:80px;
}

Jadinya...

Jadinya...


Properti z-index hanya bekerja pada posisi : absolute, relative, atau fixed.




Alhamdulillah

0 comments:


Posting Komentar


Creative Commons License
CSS position - Menentukan posisi dengan kode CSS by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/12/css-position-menentukan-posisi-dengan.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.