Jawaban:
Anda dapat menggunakan position:absolute;
untuk benar-benar memposisikan sebuah elemen dalam div induk. Saat menggunakan position:absolute;
elemen akan diposisikan secara mutlak dari div induk yang diposisikan pertama, jika tidak dapat menemukannya maka akan diposisikan secara absolut dari jendela sehingga Anda perlu memastikan div konten diposisikan.
Untuk membuat div konten diposisikan, semua position
nilai yang tidak statis akan berfungsi, tetapi relative
paling mudah karena tidak mengubah posisi div dengan sendirinya.
Jadi tambahkan position:relative;
ke div konten, hapus float dari tombol dan tambahkan css berikut ke tombol:
position: absolute;
right: 0;
bottom: 0;
div
, bukan halamannya. Jika footer juga terdapat di dalamnya div
, mungkin tampilannya sama saja. Jika Anda mengetahui ketinggian footer Anda, pada tombolnya Anda dapat menggunakan bottom: HEIGHT_OF_FOOTERpx
.
Flexbox CSS3 juga dapat digunakan untuk menyelaraskan tombol di bagian bawah elemen induk.
HTML yang dibutuhkan:
<div class="container">
<div class="btn-holder">
<button type="button">Click</button>
</div>
</div>
CSS yang diperlukan:
.container {
justify-content: space-between;
flex-direction: column;
height: 100vh;
display: flex;
}
.container .btn-holder {
justify-content: flex-end;
display: flex;
}
Tangkapan layar:
Sumber Daya Berguna:
Penampung induk harus memiliki ini:
position: relative;
Tombol itu sendiri harus memiliki ini:
position: relative;
bottom: 20px;
right: 20px;
atau apapun yang kamu suka
position:relative
adanya tombol tersebut akan dipindahkan dari posisi semula bukan berdasarkan induknya.
position: absolute
untuk itu dari kanan bawah.
Pergi ke kanan dan dapat digunakan dengan cara yang sama untuk kiri
.yourComponent
{
float: right;
bottom: 0;
}
position: relative
ke elemen yang berisi tombol formulir + Anda?