CSS - Position
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 :
Post a Comment for "CSS - Position"