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;
position: relative
ke elemen yang berisi tombol formulir + Anda?div
, bukan halamannya. Jika footer juga terdapat di dalamnyadiv
, mungkin tampilannya sama saja. Jika Anda mengetahui ketinggian footer Anda, pada tombolnya Anda dapat menggunakanbottom: HEIGHT_OF_FOOTERpx
.Flexbox CSS3 juga dapat digunakan untuk menyelaraskan tombol di bagian bawah elemen induk.
HTML yang dibutuhkan:
CSS yang diperlukan:
Tangkapan layar:
Sumber Daya Berguna:
Tampilkan cuplikan kode
sumber
Penampung induk harus memiliki ini:
Tombol itu sendiri harus memiliki ini:
atau apapun yang kamu suka
sumber
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
sumber