Cara menggunakan posisi di css

Di CSS Anda dapat mengatur posisi setiap elemen, ini sangat berguna untuk desain tata letak

Diperbarui. 23 Januari 2021

Penggunaan posisi di CSS

Pada CSS sendiri Anda dapat mengatur posisi setiap elemen, hal ini sangat berguna untuk desain tata letak yang baik. Di CSS ada beberapa metode yang bisa anda gunakan untuk menentukan posisi elemen dengan properti position. Pada properti posisi ada lima nilai yang bisa Anda gunakan

• statis
• relatif
• sangat
• tetap
• lengket

Agar berfungsi, Anda juga perlu mengatur arah posisi yang lebih spesifik dengan properti. top, right,

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

Informasi. posisi jika diterjemahkan ke dalam bahasa Indonesia berarti posisi

Posisi statis

Elemen HTML secara default diposisikan secara statis. Posisi statis tidak diposisikan dengan cara tertentu, melainkan diposisikan sesuai dengan alur normal halaman. Elemen posisi statis tidak dapat dipengaruhi oleh properti top, right,

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

div {
    border: 2px solid blue;
    position: static;
}

CopyLighting

Editor daring

Posisi relatif

Elemen dengan posisi relatif diposisikan relatif terhadap posisi normalnya. Dengan posisi relatif, Anda dapat mengatur posisi dengan properti top, right,

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

CopyLighting

Editor daring

Posisi absolut

Elemen dengan posisi absolut diposisikan sepenuhnya di luar aliran normalnya. Dengan posisi absolut Anda dapat mengatur posisi dengan properti top, right,

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

Jika posisi absolute dibungkus dengan posisi relative, maka akan mengikuti posisi kordinat dari pembungkusnya (relative). Namun jika posisi absolute tidak memiliki pembungkus yang mempunyai posisi relative, maka ia menggunakan elemen sebagai kordinatnya.

Contoh posisi absolut dibungkus dengan posisi relatif

#relative {
    background-color: grey;
    position: relative;
    width: 80%;
    height: 300px;
}
#absolute {
    background-color: yellow;
    position: absolute;
    top: 50px;
    left: 100px;
    width: 40%;
    height: 100px;
}

CopyLighting

Editor daring

Contoh posisi absolut yang TIDAK dibungkus dengan posisi relatif

#container {
    background-color: yellow;
    width: 80%;
    height: 300px;
}
#absolute {
    background-color: lightgrey;
    position: absolute;
    top: 50px;
    left: 100px;
    width: 40%;
    height: 100px;
}

CopyLighting

Editor daring

Posisi tetap

Elemen dengan posisi tetap digunakan untuk memberikan posisi tetap meskipun halaman digulir. Dengan posisi tetap, Anda dapat mengatur posisi dengan properti top, right,

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#fixed {
    background-color: red;
    position: fixed;
    left: 70px;
    width: 50%;
    height: 100px;
}

CopyLighting

Editor daring

Posisi lengket

Elemen dengan posisi lengket digunakan untuk mengubah posisi relatif dan posisi tetap. Ini diposisikan relatif sampai posisi offset yang diberikan bertemu dengan viewport - lalu "lengket" di tempatnya. Dengan sticky position, Anda dapat mengatur posisi dengan properti top, right,

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#relative {
    background-color: yellow;
    position: relative;
    top: 20px;
    left: 100px;
    width: 30%;
    height: 80px;
}

#sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 15px;
    background-color: lightgrey;
    border: 3px solid blue;
}

CopyLighting

Editor daring

Jangan lupa untuk menentukan properti position, jika tidak sticky tidak akan berjalan

Informasi. Internet Explorer, Edge 15, dan versi browser yang lebih lama tidak mendukung posisi lengket. Safari membutuhkan awalan -webkit- agar berfungsi

Posisi elemen yang tumpang tindih

Saat elemen diposisikan, mereka dapat tumpang tindih dengan elemen lain. Dengan properti

#container {
    background-color: yellow;
    width: 80%;
    height: 300px;
}
#absolute {
    background-color: lightgrey;
    position: absolute;
    top: 50px;
    left: 100px;
    width: 40%;
    height: 100px;
}

p {
    position: absolute;
    left: 10px;
    top: 10%;
    z-index: -1;
    background-color: red;
}

CopyLighting

Editor daring

Nilai properti z-index mendukung nilai positif atau negatif. Elemen dengan urutan tumpukan yang lebih tinggi selalu berada di depan elemen dengan urutan tumpukan yang lebih rendah. Jika dua elemen yang diposisikan tumpang tindih tanpa properti indeks-z yang ditentukan, elemen yang diposisikan terakhir dalam kode HTML akan ditampilkan di atas

Posisi CSS untuk apa?

Apa itu statis dan relatif?

Apa itu Indeks Z di CSS?