Position

Use these shorthand utilities for quickly configuring the position of an element.

Common values

Quick positioning classes are available, though they are not responsive.

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

Fixed top

Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.

<div class="fixed-top">...</div>

Fixed bottom

Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.

<div class="fixed-bottom">...</div>

Sticky top

ভিউপোর্টের শীর্ষে একটি উপাদানকে প্রান্ত থেকে প্রান্তে রাখুন, তবে আপনি এটিকে অতিক্রম করার পরেই। .sticky-topইউটিলিটি CSS এর ব্যবহার করে , position: stickyযা সমস্ত ব্রাউজারে সম্পূর্ণরূপে সমর্থিত নয়।

IE11 এবং IE10 position: stickyহিসাবে রেন্ডার হবে position: relative। যেমন, আমরা শৈলীগুলিকে একটি @supportsপ্রশ্নের মধ্যে মোড়ানো, আঠালোতাকে শুধুমাত্র ব্রাউজারগুলিতে সীমাবদ্ধ করে যা এটি সঠিকভাবে রেন্ডার করতে পারে।

<div class="sticky-top">...</div>