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 :
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5QMZNTdKbJ81KKfcqtABk5dqKWWPy65LgCmdIsmGC8I6806jgc2_56y3-Q184NL4xQCGhpBAapNvEABndvRenB5OK-VvT9ACJsmmBtwO4b03uTK9BazFCXci-MA1RhPP570dkwkBamaU/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