Sifat dari position fixed hampir sama dengan absolute, namun posisi dari elemen fixed akan tetap berada posisi yang ditentukan walaupun browser dizoom-in/out atau discrollke atas atau ke bawah.
untuk lebih jelas dan pahamnya, mari kita lakukan percobaan. Silahkan buat file baru dan beri nama fixed.html lalu ketikkan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>FIXED Navbar</title>
<style type="text/css">
#wrapper{
width : 960px;
margin : 0 auto;
}
#header {
width:960px;
height:50px;
background: blue;
position: fixed;
margin-bottom: 10px;
}
#content{
padding:20px;
background : green;
margin-bottom : 10px;
overflow:hidden;
}
#artikel{
width : 600px;
height : 800px;
float : left;
background: orange;
}
#sidebar {
width : 300px;
height: 200px;
float : right;
background: orange;
}
#footer{
width : 100%;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">
<div id="artikel"></div>
<div id="sidebar"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Hasil dari kode diatas adalah:
Bisa temen-temen lihat posisi header yang berwarna biru tetap pada posisinya walau kita scroll keatas.
Tersedia di Bacacoding:
Tersedia di Bacacoding:
Bagian Header pada TWITTER menggunakan position fixed sehingga ketika anda men-scroll halaman web, bagian tersebut tetap berada disana.
Nah Bagaimana…? apakah sekarang kamu sudah mengerti Cara Memposisikan Website Menjadi Fixed (Posistioning Fixed CSS)? Mungkin itu saja tulisan yang membahas tentang Cara Memposisikan Website Menjadi Fixed (Posistioning Fixed CSS), jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon