Posisi
Gunakan utilitas singkatan ini untuk mengonfigurasi posisi elemen dengan cepat.
Nilai umum
Kelas penentuan posisi cepat tersedia, meskipun tidak responsif.
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
Atasan tetap
Posisikan elemen di bagian atas viewport, dari ujung ke ujung. Pastikan Anda memahami konsekuensi dari posisi tetap dalam proyek Anda; Anda mungkin perlu menambahkan CSS tambahan.
<div class="fixed-top">...</div>
Bagian bawah tetap
Posisikan elemen di bagian bawah viewport, dari ujung ke ujung. Pastikan Anda memahami konsekuensi dari posisi tetap dalam proyek Anda; Anda mungkin perlu menambahkan CSS tambahan.
<div class="fixed-bottom">...</div>
Atasan lengket
Posisikan elemen di bagian atas viewport, dari ujung ke ujung, tetapi hanya setelah Anda menggulir melewatinya. Utilitas .sticky-top
menggunakan CSS's position: sticky
, yang tidak sepenuhnya didukung di semua browser.
IE11 dan IE10 akan dirender position: sticky
sebagai position: relative
. Karena itu, kami membungkus gaya dalam @supports
kueri, membatasi kelengketan hanya pada browser yang dapat merendernya dengan benar.
<div class="sticky-top">...</div>