Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link
Beranda
basis css dasar
belajar css dasar

Mengenal Position CSS

 Position pada CSS di gunakan untuk mengatur posisi sebuah element HTML. terkadang
kita ingin membuat 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. belajar css mengenal position css.

Adapun beberapa property CSS yang dapat digunakan untuk menentukan posisi sebuah
element HTML adalah : 

  •  static 
  •  relative 
  •  fixed
  •  absolute 

secara umum untuk membuat posisi atau menetapkan posisi sebuah element kita pasti
menggunakan property css lainnya seperti mengatur top, left, bottom, right untuk menetapan
posisi sebuah element. tetapi property tersebut tidak akan bekerja jika position belum di atur
terlebih dahulu. karena property lain tergantung dengan position yang di tetapkan. 

Static

Position static digunakan untuk mengatur element menjadi statis secara default. element
akan mengikuti posisi normal secara default. 

contoh penggunaan 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.belajarngodingg.my.id</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>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial position css di www.belajarngodingg.my.id</div>
</body>
</html>

style.css
.kotak{
    background: blue;
    position: relative;
    left: 40px;
    padding: 10px;
}


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

<!DOCTYPE html>
<html>
<head>
<title>Position CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="kotak">Tutorial position css di www.belajarngodingg.my.id</div>
</body>
</html>


style.css
 
.kotak{
    background: blue;
    position: fixed;
    left: 40px;
    padding: 10px;
    }



Absolute
Element HTML yang menggunakan position absolute akan tertimpa dengan element lain.
position adalah salah satu propertyposition css yang sangat berguna. salah satunya adalah untuk
membuat menu dropdown dengan HTML dan CSS.

Posting Komentar