Belajar CSS Dasar Part 5 : Mengenal Position CSS
A.pengertian
Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML . terkadang kita ingin memubat atau menetapkan posisi sebuah element dengan element yang lain. maka dengan menggunakan property position CSS ini kita dapat menentukan posisi sebuah element HTML sesuai dengan yang kita inginkan .
Adapun eberapa property CSS yang dapat di gunakan untuk menentukan posisi sebuah element HTML adalah:
STATIC
position static digunakan untuk mengatur element menjadi secara default . element akan mengikuti posisi normal secara default.
contoh pengunaaan position static
index.html
style.css
Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal
index.html
style.css
FIXED
sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap . tanpa ada perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top dan right pada position fixed .
index.html
style.css
Absolute
Element HTML yang menggunakana position akan tertimpa degan element lain. position adalah salah satu property position css yang sangat berguna . salah satunya adalah untuk membuat menu dropdown dengan html dan css.
refrensi
W3School.com
Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML . terkadang kita ingin memubat atau menetapkan posisi sebuah element dengan element yang lain. maka dengan menggunakan property position CSS ini kita dapat menentukan posisi sebuah element HTML sesuai dengan yang kita inginkan .
Adapun eberapa property CSS yang dapat di gunakan untuk menentukan posisi sebuah element HTML adalah:
- static
- relativ
- fixed
- absolute
STATIC
position static digunakan untuk mengatur element menjadi secara default . element akan mengikuti posisi normal secara default.
contoh pengunaaan position static
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: static;
}
Relative
Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: relative;
left: 40px;
padding: 10px;
color: white;
}
sebuah element HTML yang di setting dengan position fixed akan memiliki sifat tetap . tanpa ada perubahan bahkan jika halaman website di scroll. berlaku pengaturan left, bottom, top dan right pada position fixed .
index.html
<!DOCTYPE html>
<html>
<head>
<title>Menganal Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>
</body>
</html>
style.css
.kotak{
background: blue;
position: fixed;
left: 40px;
padding: 10px;
color: white;
}
Absolute
Element HTML yang menggunakana position akan tertimpa degan element lain. position adalah salah satu property position css yang sangat berguna . salah satunya adalah untuk membuat menu dropdown dengan html dan css.
refrensi
W3School.com
No comments