Position

Dua Jendela Sunday, November 14, 2021

7. Property CSS

a) Box Model

merupakan sebuah konsep dimana setiap elemen halaman website kita anggap seabgai sebuah kotak (box). Box inilah yang akan kemudian membangun struktur

desain dan layout dari website. Pembahasan yang akan kita pelajari meliputi :

1. Height dan Width

2. Margin dan Padding

3. Border dan Outline

4. Position

5. Overflow

6. Float dan Clear

7. Display dan Visibility

-----------------lanjutan

4. Position

Property position = menentukan posisi box terhadap objek lain. Nilai yang dapat diberikan pada property position sebagai berikut :

Static, posisinya tidak terpengaruh oleh property top, bottom, left dan right.
Relative, posisinya terpengaruh oleh property top, bottom, left dan right.
Fixed, Posisinya tidak berubah walaupun melakukan scroll pada layar.
Absolute, posisinya dapat diatur secara bebas terhadap container yang diberi relative.
Sticky, menggabungkan posisi relative dan fixed tergantung posisi scroll.

Perhatikan contoh script dibawah ini dengan nama file position.html

<html>
<head>
   <title>Latihan CSS Position</title>
   <style type="text/css">
       .relative{
           background:red; width:400px; height:300px;
           position:relative;
       }
       .absolute{
           background: blue; width: 200px; height: 100px;
           position: absolute; left: 20px; top: 30px;
       }
       .fixed{
           background: yellow; width: 200px; height: 100px;
           position: fixed;right: -20; top: 100px;
       }
   </style>
</head>
<body>
   <div class="relative">relative</div>
       <div class="absolute">absolute</div>
       <div class="fixed">fixed</div>
</body>
</html>