CSS Tutorial Part 7 : Mengenal Position pada CSS

Assalammualaikum Wr.Wb.

Create-script - haii gaesss...kali ini saya akan sharing tentang tutorial tentang bagaimana mengatur position pada CSS. sebelumnya, apa itu position pada CSS, apa saja properti yang dapat digunakan untuk menentukan penempatan posisi sebuah elemen HTML?....baik, mari kita simak pembahasannya sebagai berikut...

A. PENDAHULUAN

Pengertian

Position adalah atribut pada CSS yang digunakan untuk mengatur posisi sebuah elemen HTML.

Latar Belakang

saya membuat tutorial ini adalah, karena suatu saat saya sedang brosing dan menemukan sebuah website yang tampilannya bagus, dan ternyata itu menggunakan position pada CSS.

Maksud dan Tujuan

agar penulis dan pembaca dapat menggunakan dalam pembuatan website agar tampilan terlihat lebih menarik.

Hasil yang Diharapkan

Dapat mengimplementasikannya dalam pembuatan suatu website

B. ALAT DAN BAHAN

Text Editor
Web Browser

C. PEMBAHASAN

Mengenal Posisi pada CSS

position pada CSS digunakan untuk mengatur posisi sebuah elemen HTML. dengan menggunakan property position CSS, kita dapat menentukan posisi sebuah elemen pada HTML sesuai dengan apa yang kita harapkan.

berikut ini adalah beberapa Property CSS yang dapat digunakan untuk menentukan posisi sebuah elemen HTML yaitu :

static
relative
fixed
absolute

secara umum, untuk membuat posisi atau menetapkan posisi sebuah elemen kita pasti menggunakan property CSS lainnya seeprti top, left, bottom, right untuk menetapkan posisi sebuah elemen, tetapi property tersebut tidak akan bekerja jika position belum diatur terlebih dahulu, karena property lain tergantung dengan position yang ditetapkan

Static

Yang pertama adalah posisi static, static digunakan untuk mengatur elemen menjadi statis secara default. elemen akan mengikuti posisi normal secara default.

sebagai contoh praktek. ketikkan script berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Menganal Posisi CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="static">Mengenal Posisi CSS Static Bersama Create-Script</div>
</body>
</html>

simpan file diatas dengan format HTML.

kemudian ketikkan script CSS berikut ini :

.static{
background: blue;
position: static;
}

kemudian save dengan nama style.css dan simpan satu folder bersama file HTMLnya.

buka di Browser anda, maka hasilnya akan menjadi seperti ini :

Relative

relative adalah sebuah elemen HTML yang menggunakan position relative akan terletak pada posisi normal.

sebagai contoh ketikkan script HTML berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Position CSS Relative</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="relative">Tutorial position css Relative di Create-Script</div>
</body>
</html>

kemudian save dengan ekstensi HTML, dan ketikkan script CSS juga berikut :

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

kemudian save dengan nama style.css dan simpan dengan satu folder bersama file HTMLnya
kemudian buka di Web Browser anda maka hasilnya akan menjadi seperti ini :

Fixed

adalah sebuah elemen HTML yang di setting dengan posistion fixed akan memiliki sifat tetap. tanpa ada perubahan bahkan jika halaman website di scroll, berlaku pengaturan left, bottom, top, dan juga right pada position fixed.

Sebagai Contoh ketikkan script berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Position CSS Fixed</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="fixed">Tutorial position css Fixed di Create-Script</div>
</body>
</html>

kemudian save dengan ekstensi HTML, dan buat file baru bernama style.css, dan letakkan satu folder bersama file HTMLnya.
ketikkan script CSSnya berikut :

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

kemudian save script CSS diatas bersama dengan satu folder file HTML. dan buka file HTML melalui Web Browser milik anda, maka hasilnya akan menjadi seperti ini :

Absolute

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

sebagai contoh ketikkan script HTML berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Position CSS Absolute</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="absolute">Tutorial position css Absolute di Create-Script</div>
</body>
</html>

kemudian save dengan ekstensi file HTML, dan ketikkan script CSS berikut :

.absolute{
    background: blue;
    position: absolute;
    left: 40px;
    padding: 10px;
}

kemudian save script CSS diatas, save satu folder dengan script HTMLnya.
kemudian buka file HTMLnya menggunakan Web Browser anda maka hasilnya akan menjadi seperti ini :