Cara mengatur posisi button di html

Question

Pada CSS Anda bisa mengatur letak posisi setiap elemen, ini sangat berguna untuk desain tata letak ya

Table of Contents Show

Kegunaan position pada CSS
Posisi static
Posisi relative
Posisi absolute
Posisi fixed
Posisi sticky
Posisi elemen tumpang tindih
Yang mana dari tag HTML ini yang membuat tombol?
Apa itu Button dalam website?

Diperbaharui: 23 January 2021

Kegunaan position pada CSS

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

static
relative
absolute
fixed
sticky

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;
}

0 dan

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

1, mereka juga bekerja secara berbeda tergantung pada nilai posisi.

Informasi: position jika ditranslate ke bahasa Indonesia berarti posisi.

Posisi static

Elemen HTML secara default diposisikan static. Posisi static tidak diposisikan dengan cara khusus apa pun, melainkan diposisikan sesuai dengan aliran normal halaman. Elemen posisi static tidak bisa dipengaruhi oleh properti top, right,

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

0 dan

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

1.

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

CopyLighting

Editor Online

Posisi relative

Elemen dengan posisi relative diposisikan relative terhadap posisi normalnya. Dengan posisi relative Anda bisa mengatur letak posisi dengan properti top, right,

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

0 dan

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

1. Elemen yang diposisikan relative dapat tumpang tindih dengan elemen lain, dan menjaga ruang yang awalnya disediakan dalam aliran normal.

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

CopyLighting

Editor Online

Posisi absolute

Elemen dengan posisi absolute diposisikan sepenuhnya keluar dari aliran normalnya. Dengan posisi absolute Anda bisa mengatur letak posisi dengan properti top, right,

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

0 dan

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

1. Elemen yang diposisikan absolute dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.

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 <body> sebagai kordinatnya.

Contoh posisi absolute yang dibungkus dengan posisi relative:

#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 Online

Contoh posisi absolute yang TIDAK dibungkus dengan posisi relative:

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

CopyLighting

Editor Online

Posisi fixed

Elemen dengan posisi fixed digunakan untuk memberikan posisi tetap bahkan jika halaman tersebut digulir. Dengan posisi fixed Anda bisa mengatur letak posisi dengan properti top, right,

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

0 dan

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

1. Elemen yang diposisikan fixed dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.

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

CopyLighting

Editor Online

Posisi sticky

Elemen dengan posisi sticky digunakan untuk toggle posisi relative dan posisi fixed. Ini diposisikan relatif sampai posisi offset yang diberikan bertemu di viewport – kemudian “sticky” di tempatnya. Dengan posisi sticky Anda bisa mengatur letak posisi dengan properti top, right,

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

0 dan

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

1. Elemen yang diposisikan sticky dapat tumpang tindih dengan elemen lain, dan tidak menjaga ruang yang awalnya disediakan dalam aliran normal.

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

CopyLighting

Editor Online

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

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

Posisi elemen tumpang tindih

Ketika elemen diposisikan, maka mereka dapat tumpang tindih dengan elemen yang lainnya. Dengan properti

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

3 Anda bisa mengatur untuk menentukan elemen mana yang akan ditempatkan dibelakang dan elemen mana yang akan ditempatkan didepan.

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

CopyLighting

Editor Online

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

Yang mana dari tag HTML ini yang membuat tombol?

Tag <button> Pada HTML. HTML elemen tag <button> merupakan tag pada HTML yang digunakan untuk menciptakan sebuah tombol yang dapat diklik.

Apa itu Button dalam website?

Button merupakan salah satu elemen dari HTML yang mungkin paling sering Anda jumpai di dalam sebuah website. Biasanya button digunakan untuk melakukan submit form dan lain sebagainya.

kode html