#CSS - #CSS Dasar

Belajar CSS Part 8 : Mengenal Position CSS

By Diki Alfarabi Hadi
1 January 2016
CSS CSS Dasar

Belajar CSS 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. belajar css mengenal position css

contoh penggunaan position static

index.html

<!DOCTYPE html>

<html>

<head>

<title>Menganal Position CSS</title>

</head>

<body>

<div class="kotak">Tutorial mengenal position css di www.malasngoding.com</div>

</body>

</html>

style.css

.kotak{

background: blue;

position: static;

}

contoh position static css

Relative

Sebuah element HTML yang menggunakan position relative akan terletak pada posisi normal.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Position CSS</title>

</head>

<body>

<div class="kotak">Tutorial position css di www.malasngoding.com</div>

</body>

</html>

style.css

.kotak{

background: blue;

position: relative;

left: 40px;

padding: 10px;

}

contoh position relative 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

<!DOCTYPE html>

<html>

<head>

<title>Position CSS</title>

</head>

<body>

<div class="kotak">Tutorial position css di www.malasngoding.com</div>

</body>

</html>

style.css

.kotak{

background: blue;

position: fixed;

left: 40px;

padding: 10px;

}

contoh position fixed css

Absolute

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

contoh position absolute css

sekian tutorial belajar CSS Mengenal position css. akan di lanjutkan pada tutorial CSS selanjutnya di www.malasngoding.com.

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.