Wednesday , December 2 2020
Home » CSS » Belajar Position di CSS

Belajar Position di CSS

Belajar Position di CSS

lebakcyber.net – Belajar position di css. Pada kesempatan kali ini kita akan mempelajari apa itu position pada css. Position pada css dapat digunakan untuk mengatur sebuah posisi element pada halaman HTML.

Misalnya saat ingin membuat sebuah posisi dari suatu element dengan element yang lain, dengan menggunakan property position di CSS tersebut kita bisa menentukan posisi dari sebuah element yang ada pada halaman HTML sesuai dengan keinginan kita.

Property Position di CSS ada beberapa yang bisa digunakan agar dapat menentukan posisi pada sebuah element, yaitu adalah :

Advertisements
  • Fixed Position
  • Relative Position
  • Absolute Position
  • Static Position

Untuk menetapkan sebuah posisi dari suatu element biasanya membutuhkan property css lainnya agar dapat mengatur left, right, top dan bottom yang dapat digunakan untuk menentukan posisi dari sebuah element. Namun property tersebut tidak dapat langsung bekerja kalau position pada css belum diatur, hal tersebut dikarenakan property lain akan bergantung dengan posisi yang ditetapkan oleh kita.

Sekarang kita bahas satu persatu mengenai beberapa element position yang dapat digunakan pada CSS.

Advertisements

Contoh Penggunaan Fixed Position Pada CSS

Element pada halaman HTML yang menggunakan fixed position di CSS nantinya akan memiliki sifat yang tetap tanpa adanya perubahan kalau halaman website tersebut di scroll. Penggunaan fixed position ini membutuhkan property css lainnya seperti right, left, top dan botton.

Sekarang coba kita praktekan bagaimana penerapan dari Fixed Position di CSS tersebut, silahkan buat file style.css dan juga index.html lalu masukan perintah seperti dibawah ini :

style.css

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

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Fixed Position di CSS - Lebak Cyber</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="posisi-fixed">Ini adalah contoh posisi fixed di halaman HTML menggunakan CSS</div>
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Belajar Position di CSS

Contoh Penggunaan Relative Position Pada CSS

Element pada halaman HTML yang menggunakan relative position pada cssnya akan terletak di posisi normal pada halaman HTML tersebut.

Sekarang coba kita praktekan bagaimana penerapan dari Relative Position di CSS tersebut, silahkan buat file style.css dan juga index.html lalu masukan perintah seperti dibawah ini :

style.css

.posisi-relatif{
    background: red;
    position: relative;
    left: 40px;
    padding: 10px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Static Position di CSS - Lebak Cyber</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="posisi-relatif">Ini adalah contoh posisi relatif di halaman HTML menggunakan CSS</div>
</body>
</html>

Nanti hasilnya akan seperti pada gambar dibawah ini :

Belajar Position di CSS

Contoh Penggunaan Absolute Position Pada CSS

Element pada halaman HTML yang menggunakan posisi absolut nantinya akan tertimpa dengan element lain yang ada pada halaman HTML tersebut, posisi absolut ini akan sangat berguna kalau kita ingin membuat sebuah menu dropdown dengan menggunakan HTML dan juga CSS.

Sekarang coba kita praktekan bagaimana penerapan dari Absolute Position di CSS tersebut, silahkan buat file style.css dan juga index.html lalu masukan perintah seperti dibawah ini :

style.css

.posisi-absolut1{
    position: absolute;
    background: red;
  top: 80px;
  right: 0;
  width: 200px;
    padding: 10px;
}

.posisi-absolut2{
    position: absolute;
    background: blue;
  top: 10px;
  right: 80;
  width: 150px;
    padding: 10px;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Absolut Position di CSS - Lebak Cyber</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="posisi-absolut1">Ini adalah contoh posisi absolut di halaman HTML menggunakan CSS</div>
    <div class="posisi-absolut2">Ini adalah contoh posisi absolut di halaman HTML menggunakan CSS</div>
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Contoh Penggunaan Static Position di CSS

Static position di CSS biasanya digunakan agar dapat mengatur element di HTML secara default menjadi statis. Element tersebut nantinya secara default akan mengikuti posisi normal.

Sekarang coba kita praktekan bagaimana penerapan dari Static Position di CSS tersebut, silahkan buat file style.css dan juga index.html lalu masukan perintah seperti dibawah ini :

style.css

.posisi-statis{
    position: static;
    background: green;
}

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Static Position di CSS - Lebak Cyber</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="posisi-statis">Ini adalah contoh posisi statis menggunakan css</div>
</body>
</html>

Nanti hasilnya akan seperti gambar dibawah ini :

Oke jadi itulah pembahasan kita kali ini mengenai position di css, semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa di tutorial belajar CSS selanjutnya.

About Firdan Ardiansyah

Admin di lebakcyber.net Untuk berhubungan dengan saya, silahkan kirim email ke : firdan@lebakcyber.net

Check Also

merubah list dengan css

Merubah List Dengan CSS

Merubah List Dengan CSS lebakcyber.net – Merubah list dengan CSS. Setelah beberapa postingan sebelumnya yang …

Leave a Reply

Your email address will not be published. Required fields are marked *