Pengertian CSS Position Menentukan Untuk Posisi
Pagi sobat DS kali ane mau bagi'in Pengertian CSS Position Menentukan Untuk Posisi suatu widget dll pada suatu tampilan di blog .
oke langsung aja di ya sob :)
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;
}
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/AVvXsEiU0I8MJZNrUJVwyWqNX4OcJy6ZkBLCVMdh7Se2XlD8_ek9ietxlqwn0A48xbss60nijICdgTJ8dKVVtsInNSI4ucOR77X8NGrZY8EwzqMkGEd-PLMlqZ1gBPxLMIE3oboSFpTk0p7fDkY/s220/65.JPG" />
</body>
</html>
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.
Demikian Pengertian CSS Position Menentukan Untuk Posisi Selamat Mencoba Sob
Backlinks Please Thanks ^_^
|
URL
|
|
Code For Forum
|
|
HTML Code
|
Tidak ada komentar :
Posting Komentar
Saya hanyalah manusia biasa, yang tidak lepas dari kekurangan, untuk itu, Saya mengharapkan, Kritik dan Saran Anda di form KOMENTAR dibawah ini, untuk memperbaiki kekurangan yang ada.
Sebagai pribadi yang BAIK, kita harus membudayakan kata-kata yang sopan, baik berupa Kritik atau Saran. Terimakasih :)~