position একটি উপাদান কীভাবে স্থাপন করা হয় এবং অফসেট প্রপার্টিগুলি (top/right/bottom/left) প্রযোজ্য কিনা তা নিয়ন্ত্রণ করে।
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute একটি উপাদানকে তার নিকটতম অবস্থানযুক্ত পূর্বপুরুষের সাপেক্ষে স্থাপন করে (static ছাড়া অন্য কিছু)। তাই আপনি একটি অভিভাবক উপাদানে position: relative সেট করেন এটিকে রেফারেন্স পয়েন্ট করার জন্য:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
এই relative-parent / absolute-child প্যাটার্ন সর্বত্র রয়েছে: badges, dropdowns, tooltips, বন্ধ বোতাম।
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0), তারপর সেখানে থাকে যখন এর কন্টেইনার দৃশ্যে থাকে — বিভাগের শীর্ষচরের জন্য দুর্দান্ত।absolute/fixed উপাদানগুলি স্বাভাবিক প্রবাহ থেকে সরানো হয়, তাই তারা স্থান সংরক্ষণ করে না — ভাইবোনগুলি এমন আচরণ করে যেন তারা সেখানে নেই, যা ওভারল্যাপ সৃষ্টি করতে পারে। এর জন্য পরিকল্পনা করুন (উদাহরণস্বরূপ একটি fixed navbar এর জন্য padding যোগ করুন)।
position overlays, sticky headers, modals, dropdowns এবং badges এর জন্য অপরিহার্য।
relative-parent/absolute-child সম্পর্ক এবং fixed-vs-sticky পার্থক্য হল ব্যবহারিক মূল যা আপনি ক্রমাগত ব্যবহার করেন।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন