Belajar CSS Part 8 : Mengenal Position CSS

BELAJAR CSS MENGENAL POSITION
Position pada CSS berfungsi untuk mengatur posisi element HTML. Terkadang kita ingin menempatkan posisi element satu dengan yang lain. Maka dengan menggunakan properti Position ini kita dapat menentukan posisi element sesuai keinginan kita.

Adapun beberapa properti CSS yang dapat digunakan posisi element 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 posisi element menjadi statis secara default. Element akan mengganti posisi normal secara default. Berikut contoh pengunaan 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="box">Tutorial mengenal position css di <a href="script-kiddies22.blogspot.co.id">Script Kiddies</div>
</body>
</html>

style.css

.box{
    background: green;
    color: white;
    position: static;
}

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="box">Tutorial mengenal position css di <a href="script-kiddies22.blogspot.co.id">Script Kiddies</div>
</body>
</html>

style.css

.box{
    background: green;
    color: white;
    position: relative;

}

Position Relative

FIXED
Sebuah element HTML yang disetting dengan position fixef akan memiliki sifat tetap. Tidak ada perubahan bahkan ketika halaman website di scroll. Berlaku pengaturan left, bottom, top dan right pada position fixed. Sebagai contoh Navigation Bar pada blog ini menggunakan 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="box">Tutorial mengenal position css di <a href="script-kiddies22.blogspot.co.id">Script Kiddies</div>
</body>
</html>

style.css

.box{
    background: green;
    color: white;
    position: static;
    left: 50px;
    padding: 10px
}


Position Fixed

ABSOLUTE
Element HTML yang menggunakan position absolute akan tertimpa dengan element lain. Absoulte adalah salah satu properti position CSS yang sangat berguna. Salah satunya adalah untuk membuat menu dropdown

index.html


<!DOCTYPE html>
<html>
<head>
    <title>Menganal Position CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="box">Tutorial mengenal position css di <a href="script-kiddies22.blogspot.co.id">Script Kiddies</a></div>
    <div class="box-2">Penggunaan Position Fixed pada CSS <a href="script-kiddies22.blogspot.co.id">Script Kiddies</a></div>
</body>
</html>

style.css


.box{
    background: green;
    color: white;
    position: fixed;
    left: 50px;
    padding: 10px
}
.box-2{
    background: red;
    color: white;
    position: absolute;
    top: 35px;
    left: 200px;
    padding: 10px;
}

Position Absolute CSS

KESIMPULAN
Dengan adanya properti Position ini dapat mempermudah kita dalam mengatur Posisi Pada CSS. Dapat kita kembangkan sendiri penggunaan properti CSS sesuai keinginan kita. Yap sampai sini saja tutorial Belajar CSS Kali ini, jika ada pertanyaan silahkan berikan komentar, Sekian Terima Kasih

Referensi : Malas Ngoding

TUTORIAL CSS LAINYA

Belajar CSS Part 1 : Pengertian dan Mengenal CSS
Belajar CSS Part 2 : Cara Penulisan CSS
Belajar CSS Part 3 : Mengubah Background Dengan CSS
Belajar CSS Part 4 : Margin dan Padding CSS
Belajar CSS Part 5 : Mengatur Font Dengan CSS
Belajar CSS Part 6 : Mengatur Hyperlink Dengan CSS
Belajar CSS Part 7 : Mengatur Format Text Dengan CSS
Belajar CSS Part 8 : Mengenal Position CSS
Belajar CSS Part 9 : Mengatur Border Dengan CSS
Belajar CSS Part 10 : Mengatur List Dengan CSS
Belajar CSS Part 11 : Mengatur Float Dengan CSS