CSS - Position
2/05/2019
Add Comment
Properti position digunakan untuk menentukan jenis metode apa yang diterpakan pada suatu elemen.
Ada lima macam Property position:
- static
- relative
- fixed
- absolute
- sticky
Elemen kemudian diposisikan menggunakan properti top, bottom, left, dan right. Namun, properti ini tidak akan berfungsi kecuali properti position diatur terlebih dahulu. Dan juga akan bekerja secara berbeda tergantung pada nilai position.
position: statis;
Elemen HTML diposisikan statis secara default.
Elemen position statis tidak dipengaruhi oleh properti top, bottom, left, dan right.
Elemen dengan posisi: statis; tidak diposisikan dengan cara khusus apa pun; selalu diposisikan sesuai dengan aliran normal halaman:
Contoh CSS
.incrud-position-static {
position: static;
}
position: relatif;
Elemen dengan position: relatif; diposisikan relatif pada letak normalnya.
Mengatur properti top,left,bottom dan right dari elemen mempunyai atribut position relatif akan mengubah posisi elemen dari posisi awlnya. Tetapi Konten / elemen lain tidak akan mengikuti / disesuaikan agar sesuai tampilannya tidak tumpang tindih.
Contoh CSS
.incrud-position-relatif {
position: relative;
left: 50px;
}
position: fixed;
Elemen dengan position: fixed; berarti elemen yang diposisikan berarti akan selalu berada di tempat yang sama bahkan jika halaman tersebut digulir/scrolling. Properti top,left,bottom dan right digunakan untuk memposisikan letak elemen pada halaman.
Contoh penggunaan elemen fixed di sudut kanan bawah halaman. Berikut ini adalah CSS yang digunakan:
Contoh CSS
.incrud-position-fixed{
position: fixed;
bottom: 40px;
right: 0;
width: 300px;
border: 3px solid rgb (33, 77, 173);
background-color: rgb (199, 199, 233);
}
position: absolut;
Elemen dengan position: absolut; elemen akan diposisikan terdekat terhadap elemen fixed sebelumnya (bukan diposisikan relatif terhadap tampilan, seperti properti fixed).
Namun; jika elemen yang diposisikan absolute tidak memiliki fixed yang diposisikan fixed sebelumnya,maka akan menggunakan badan layar, dan bergerak bersama dengan scrollinghalaman.
Contoh CSS
.incrud-position-relatif-2{
position: relative;
width: 400px;
height: 200px;
border: 3px solid rgb(87, 33, 173);
}
.incrud-position-absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid rgb(87, 33, 173);
}
CSS
/*position*/
.incrud-position-static {
position: static;
}
.incrud-position-relatif {
position: relative;
left: 50px;
}
.incrud-position-fixed{
position: fixed;
bottom: 40px;
right: 0;
width: 300px;
border: 3px solid rgb (33, 77, 173);
background-color: rgb (199, 199, 233);
}
.incrud-position-relatif-2{
position: relative;
width: 400px;
height: 200px;
border: 3px solid rgb(87, 33, 173);
}
.incrud-position-absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid rgb(87, 33, 173);
}
HTML
<html>
<head>
<link href="cssincrud.css" rel="stylesheet">
<title>
Contoh - Incrud
</title>
</head>
<body>
<div class="incrud-position-static">
Contoh Position static -1
</div>
<div class="incrud-position-relatif">
Contoh Position relatif
</div>
<div class="incrud-position-fixed ">
Contoh Position fixed
</div>
<div class="incrud-position-relatif-2 ">
Contoh Position relatif 2
</div>
<div class="incrud-position-absolute ">
Contoh Position absolute
</div>
</body>
</html>
Tampilan :
0 Response to "CSS - Position"
Post a Comment