position আর z-index — relative, absolute, fixed, sticky

১ · position কী সমস্যার সমাধান করে — সারির বাইরে বসা

আগের পর্বে (পর্ব ২৩) দেখেছেন, ব্রাউজার পাতার element-গুলো একটি স্বাভাবিক নিয়মে সাজায়: block বাক্স একটির নিচে আরেকটি, inline লেখা লাইন ধরে বাঁ থেকে ডানে। এই নিয়মের নাম normal flow. পাতার বেশিরভাগ কাজ এই flow-ই করে দেয় — লেখা লম্বা হলে বাক্স নিজেই বড় হয়, পরের জিনিস নিজেই নিচে সরে।

কিন্তু কিছু নকশা এই সারিতে আঁটে না। অনলাইন দোকানের পণ্য-কার্ডের কোণে “-২০%” লেখা লাল ব্যাজ। স্ক্রল করলেও ওপরে আটকে থাকা মেনু। পাতার ওপর কালো আবরণ আর মাঝখানে “অর্ডার সফল হয়েছে” বাক্স। বোতামে মাউস রাখলে ছোট ব্যাখ্যা। এগুলো সারির নিয়ম ভাঙে — অন্য কিছুর ওপরে ভাসে, বা স্ক্রলের সাথে নড়ে না। এর জন্যই CSS-এর position property.

নিচের ডায়াগ্রামে একই তিনটি বাক্স — ক, খ, গ — রাখা হয়েছে। শুধু মাঝের লাল “খ”-এর position বদলাচ্ছে। প্রতিটি ধাপে দুটি জিনিস খেয়াল করুন: খ-এর আসল জায়গাটা খালি থাকছে কি না, আর খ কার সাপেক্ষে মাপ নিচ্ছে।

একটি শব্দ মনে রাখুন: যার position static ছাড়া অন্য যেকোনো মান, তাকে বলে positioned element. শুধু positioned element-এর ক্ষেত্রেই top, right, bottom, left আর z-index কাজ করে (একটি ব্যতিক্রম — flex আর grid item-এ z-index position ছাড়াও কাজ করে, পর্ব ২৭-এ grid-এ দেখবেন)।

২ · relative — জায়গা রেখে একটু সরে বসা

position: relative সবচেয়ে নিরীহ মান। এটি দিলে element normal flow-এই থাকে, ঠিক আগের মতো জায়গা নেয়। তারপর top, right, bottom, left দিলে ব্রাউজার বাক্সটিকে আঁকার সময় সেই দূরত্বে সরিয়ে দেয়। আশপাশের কেউ এই সরে যাওয়া টের পায় না — তাদের হিসাবে বাক্সটি এখনো আসল জায়গাতেই আছে।

দিকগুলো নিয়ে একটু সাবধান। top: 20px মানে “ওপরের দিক থেকে 20px দূরে সরাও” — অর্থাৎ বাক্স নিচে নামে। left: 30px মানে বাঁ দিক থেকে 30px দূরে — বাক্স ডানে যায়। ঋণাত্মক মান দিলে উল্টো দিকে। নিচের এডিটরে দেখুন:

.row { padding: 20px; background: #f1f5f9; }
.box {
  display: inline-block;
  width: 70px; height: 70px;
  margin-right: 10px;
  line-height: 70px; text-align: center;
  font: 700 24px sans-serif;
  background: #93c5fd; border: 2px solid #1d4ed8;
}
.move {
  position: relative;
  top: 20px;    /* ওপর থেকে 20px দূরে → নিচে নামে */
  left: 30px;   /* বাঁ থেকে 30px দূরে → ডানে যায় */
  background: #fca5a5;
}

বাস্তবে relative দিয়ে বাক্স সরানো কমই দরকার হয় — যেমন আইকনকে লেখার সাথে মেলাতে ১-২ পিক্সেল নামানো। relative-এর আসল কাজ অন্যটি, আর সেটিই পরের অংশের চাবি: একটি relative বাক্স তার ভেতরের absolute বাক্সগুলোর containing block হয়ে যায়। নিজে না সরেও সে বলে দেয়, “আমার ভেতরের ভাসমান বাক্সগুলো আমার কিনারা থেকে মাপ নেবে।” (relative-এ top আর bottom একসাথে দিলে top জেতে; বাক্সের মাপ কখনো বদলায় না।)

৩ · absolute — flow থেকে বেরিয়ে containing block ধরে বসা

position: absolute দিলে দুটি বড় ঘটনা ঘটে। প্রথমত, বাক্সটি normal flow থেকে পুরোপুরি বেরিয়ে যায় — পাশের আর পরের element-রা এমন আচরণ করে যেন সে নেই, তার জায়গা দখল করে নেয়। দ্বিতীয়ত, top/right/bottom/left এখন মাপা হয় একটি নির্দিষ্ট আয়তক্ষেত্রের কিনারা থেকে, যার নাম containing block.

প্রশ্ন হলো, সেই containing block কে? নিয়মটি এক লাইনের: DOM গাছে ওপরের দিকে উঠতে থাকুন; প্রথম যে পূর্বপুরুষের position static নয়, সে-ই containing block (ঠিক করে বললে, তার padding-এর বাইরের কিনারা, border-এর ঠিক ভেতর)। কাউকে না পেলে ব্রাউজার ব্যবহার করে initial containing block — পাতার একেবারে শুরুতে বসানো, viewport-এর সমান একটি আয়তক্ষেত্র। নিচের ডায়াগ্রামে ব্রাউজারের এই খোঁজাখুঁজি ধাপে ধাপে দেখুন:

1<body>2  <main class="shop">      ← relative3    <article class="card">  ← static4      <p class="price">     ← static5        ৳ ৮,৫০০6        <span class="badge">  ← absolute7      </p>8    </article>9  </main>10</body>

এবার সবচেয়ে প্রচলিত ব্যবহারটি নিজে চালিয়ে দেখুন — পণ্য-কার্ডের কোণে ছাড়ের ব্যাজ। কার্ডে position: relative (containing block বানানোর জন্য), ব্যাজে position: absolute:

.card {
  position: relative;   /* ← ব্যাজের containing block */
  width: 200px;
  margin: 30px;
  padding: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-family: sans-serif;
}
.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dc2626; color: #fff;
  font-weight: 700;
}

absolute বাক্সের মাপ আর inset shorthand

absolute দিলে <span>-এর মতো inline element-ও block-এর মতো আচরণ করে (width, height মানে)। চওড়া না দিলে বাক্স আর পুরো লাইন জুড়ে ছড়ায় না, ভেতরের লেখা যতটুকু, ততটুকুই চওড়া হয় — একে বলে shrink-to-fit. আর উল্টো দুই দিক একসাথে দিলে (যেমন left: 0 আর right: 0) বাক্স দুই কিনারা পর্যন্ত টেনে লম্বা হয়।

চার দিক বারবার লেখার বদলে একটি shorthand আছে — inset. margin-এর মতোই ওপর থেকে ঘড়ির কাঁটার দিকে: ওপর, ডান, নিচ, বাঁ। inset এখন Baseline Widely available — সব আধুনিক ব্রাউজারে নিশ্চিন্তে চলে।

.a { inset: 0; }               /* top:0; right:0; bottom:0; left:0 — পুরোটা ঢেকে দাও */
.b { inset: 10px 20px; }       /* ওপর-নিচ 10px, ডান-বাঁ 20px */
.c { inset: auto 0 0 auto; }   /* নিচ-ডান কোণে: bottom:0; right:0 */
.d { inset-inline-end: 0; }    /* logical রূপ — বাংলায় ডান, আরবিতে বাঁ */

absolute বাক্স মাঝখানে বসানোর দুই উপায়

modal বাক্স বা loading চিহ্ন ঠিক মাঝখানে বসানো একটি ক্লাসিক কাজ। দুটি নির্ভরযোগ্য উপায় আছে:

.screen {
  position: relative;          /* overlay-এর containing block */
  height: 240px;
  padding: 12px;
  background: #e2e8f0;
  font-family: sans-serif;
}
.overlay {
  position: absolute;
  inset: 0;                    /* পুরো .screen ঢেকে দেয় */
  background: rgb(15 23 42 / 0.55);
}
.box {
  position: absolute;
  inset: 0;
  margin: auto;                /* উপায় ১: চার দিকে auto */
  width: 220px; height: 70px;
  line-height: 70px; text-align: center;
  background: #fff; border-radius: 10px;
}

৪ · fixed — জানালার কাচে সাঁটা স্টিকার

position: fixed দেখতে absolute-এর মতোই — flow থেকে বেরিয়ে যায়, জায়গা ছেড়ে দেয়। পার্থক্য একটাই, কিন্তু বড়: এর containing block সাধারণত viewport, অর্থাৎ ব্রাউজারের দৃশ্যমান জানালা। পাতা যত খুশি স্ক্রল করুন, fixed বাক্স জানালার একই জায়গায় থাকে। মোবাইলের দোকান-অ্যাপের নিচে “কার্টে যান” বার, চ্যাট-সাহায্যের গোল বোতাম, বা কুকি-নোটিশ — সবই এর উদাহরণ।

নিচের প্রিভিউটি ইচ্ছা করে লম্বা রাখা হয়েছে, তাই প্রিভিউর ভেতরে স্ক্রল করা যাবে। মাউস প্রিভিউর ওপর রেখে চাকা ঘোরান (ফোনে আঙুল দিয়ে টানুন):

<style>
  body { margin: 0; font-family: sans-serif; }
  .page { padding: 16px 16px 70px; }
  .item { height: 110px; margin-bottom: 12px; padding: 10px;
          background: #f1f5f9; border-radius: 8px; }
  .bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 12px; text-align: center;
    background: #15803d; color: #fff;
  }
</style>
<div class="page">
  <div class="item">পণ্য ১ — প্রিভিউর ভেতরে নিচে স্ক্রল করুন ↓</div>
  <div class="item">পণ্য ২</div>
  <div class="item">পণ্য ৩</div>
  <div class="item">পণ্য ৪</div>
  <div class="item">পণ্য ৫</div>
  <div class="item">পণ্য ৬ — তালিকা শেষ</div>
  <div class="bar">কার্টে ৩টি পণ্য · ৳ ১,২৫০ — চেকআউট</div>
</div>

আর মনে রাখুন, fixed বার স্ক্রিনের জায়গা খায় — ছোট ফোনে বা জুম করা পাতায় ওপরে-নিচে দুটি fixed বার থাকলে পড়ার জায়গাই প্রায় থাকে না। তাই fixed অংশ যত কম আর যত ছোট, তত ভালো।

৫ · sticky — সীমায় পৌঁছে আটকে যাওয়া

position: sticky দুই জগতের মিশ্রণ। শুরুতে এটি relative-এর মতো — flow-এ থাকে, নিজের জায়গা নেয়। কিন্তু স্ক্রল করতে করতে যখন বাক্সটি একটি সীমা ছুঁয়ে ফেলে — যেমন top: 0 মানে “দৃশ্যমান অংশের ওপর থেকে 0 দূরত্ব” — তখন সেখানেই আটকে যায়, অনেকটা fixed-এর মতো। আর যখন তার parent-এর নিচের প্রান্ত উঠে আসে, তখন parent-ই তাকে ঠেলে নিয়ে বেরিয়ে যায়। এটি Baseline Widely available; পুরোনো -webkit-sticky prefix আর লাগে না।

এবার নিজে স্ক্রল করে দেখুন। এখানে তালিকাটি একটি নির্দিষ্ট উচ্চতার বাক্সে রাখা হয়েছে, আর overflow-y: auto দিয়ে বাক্সটিকে নিজের ভেতরে স্ক্রল করার ক্ষমতা দেওয়া হয়েছে — অর্থাৎ বাক্সটি একটি scroll container. sticky শিরোনাম এই বাক্সের দৃশ্যমান অংশের সাপেক্ষেই আটকাবে:

.list {
  height: 200px;
  overflow-y: auto;      /* নিজের স্ক্রল — scroll container */
  border: 2px solid #334155;
  font-family: sans-serif;
}
h4 {
  position: sticky;
  top: 0;                /* সীমা — এটি ছাড়া sticky কাজ করে না */
  margin: 0;
  padding: 6px 10px;
  background: #fde68a;   /* রং না দিলে নিচের লেখা দেখা যাবে */
}
p { margin: 0; padding: 10px; border-bottom: 1px solid #e2e8f0; }

“sticky কাজ করছে না” — চারটি পরিচিত কারণ

DevTools-এ পূর্বপুরুষদের Computed স্টাইলে overflow দেখুন — visible ছাড়া কিছু পেলেই সন্দেহভাজন পেয়ে গেলেন। overflow: clip এখন Baseline Widely available.

sticky টেবিল-শিরোনাম

লম্বা টেবিলে — যেমন পরীক্ষার ফলে — স্ক্রল করতে করতে কোন কলাম কিসের, ভুলে যাওয়া সহজ। th { position: sticky; top: 0; } দিলেই কলামের শিরোনাম ওপরে আটকে থাকে। নির্ভরযোগ্যতার জন্য thead বা tr-এ নয়, প্রতিটি th-এ sticky দিন। আর একটি সূক্ষ্ম ব্যাপার: টেবিলে border-collapse: collapse থাকলে border-গুলো পাশের ঘরগুলোর সাথে ভাগাভাগি হয়, তাই অনেক ব্রাউজারে sticky শিরোনামের border ঠিকমতো সাথে ওঠে না — নিরাপদ থাকতে border-collapse: separate; border-spacing: 0; ব্যবহার করুন। অনুশীলন ৩-এ এটি নিজে বানাবেন।

৬ · z-index আর stacking context — কে কার ওপরে

বাক্সগুলো একে অপরের ওপর পড়লে কোনটি সামনে দেখা যাবে, তার জন্য ব্রাউজার একটি তৃতীয় অক্ষ কল্পনা করে — পর্দা থেকে আপনার চোখের দিকে। এই অক্ষে ক্রম ঠিক করে z-index. বড় সংখ্যা মানে সামনে। z-index শুধু positioned element (আর flex/grid item)-এ কাজ করে; static বাক্সে লিখলে কিছুই হয় না।

কিন্তু z-index একটি বিশাল, সবার জন্য খোলা প্রতিযোগিতা নয়। পাতার element-রা কয়েকটি দলে ভাগ হয়ে থাকে, প্রতিটি দলের নাম stacking context. z-index শুধু একই দলের ভেতরে তুলনা হয়। একটি দল পুরোটা একসাথে ওপরে বা নিচে থাকে — তার ভেতরের কোনো সদস্য যত বড় সংখ্যাই পাক, দলের বাইরের কাউকে টপকাতে পারে না।

এবার একটি অতি পরিচিত বাগ ধাপে ধাপে ভেঙে দেখি। দোকানের header-এ একটি dropdown মেনু আছে, যাকে z-index: 9999 দেওয়া হয়েছে। তবু নিচের অফার-ব্যানার মেনুটিকে ঢেকে দিচ্ছে:

1.header { position: relative; z-index: 1; }2.menu   { position: absolute; z-index: 9999; }3.banner { position: relative; z-index: 2; }45<header class="header">6  <ul class="menu">…</ul>7</header>8<div class="banner">…</div>

এবার বাগটি নিজের চোখে দেখুন, তারপর নিজেই সারান:

body { font-family: sans-serif; }
.header {
  position: relative;
  z-index: 1;            /* ← এখানেই নতুন stacking context */
  padding: 10px;
  background: #1e3a8a; color: #fff;
}
.menu {
  position: absolute;
  top: 100%; left: 10px;
  z-index: 9999;         /* এত বড় সংখ্যা — তবু নিচে! */
  margin: 0; padding: 8px 28px;
  background: #fff; color: #111;
  border: 1px solid #94a3b8;
}
.banner {
  position: relative;
  z-index: 2;
  margin-top: 8px; padding: 30px 10px;
  background: #fbbf24;
}

কী কী নতুন stacking context বানায়

শুধু z-index নয় — আরও অনেক property চুপচাপ নতুন দল খুলে দেয়। বাগ খুঁজতে এই তালিকা খুব কাজের:

• পাতার root element (html)
• position: relative বা absolute + auto ছাড়া যেকোনো z-index
• position: fixed বা sticky — z-index ছাড়াই, সবসময়
• flex বা grid item, যার z-index auto নয়
• opacity 1-এর কম (যেমন opacity: 0.99) — এটিই সবচেয়ে চমকে দেয়
• transform, translate, scale, rotate, filter, backdrop-filter, perspective, clip-path, mask — none ছাড়া যেকোনো মান
• mix-blend-mode normal ছাড়া অন্য কিছু; contain: layout বা paint; এসব property-র জন্য will-change
• isolation: isolate — যার একমাত্র কাজই নতুন দল খোলা

isolation: isolate — ইচ্ছা করে একটি দল খোলা

কখনো কখনো আপনি নিজেই দল চান। ধরুন একটি কার্ডের ভেতরে সাজানোর জন্য ::before-এ z-index: -1 দিয়ে একটি রঙিন আকৃতি লেখার পেছনে রাখলেন। কার্ড নিজে কোনো দল না হলে সেই -1 চলে যায় কার্ডেরও পেছনে — কার্ডের নিজের ব্যাকগ্রাউন্ডের নিচে — আর আকৃতিটি ঢাকা পড়ে হারিয়ে যায়। কার্ডে z-index দিলে সারানো যায়, কিন্তু তাতে কার্ড আবার পাতার অন্য z-index-এর সাথে প্রতিযোগিতায় নামে। সবচেয়ে পরিষ্কার সমাধান isolation: isolate: এটি কার্ডকে একটি দল বানায়, কিন্তু কোনো z-index নম্বর দেয় না, আর position-ও লাগে না। Baseline Widely available.

.card {
  position: relative;                /* ::before-এর containing block */
  isolation: isolate;                /* কার্ড নিজেই একটি দল */
}
.card::before {
  content: ""; position: absolute; inset: 0;
  z-index: -1;                       /* কার্ডের লেখার পেছনে, কিন্তু কার্ডের ভেতরেই */
  background: linear-gradient(135deg, #fde68a, #fca5a5);
}

একটি দলের ভেতরে আঁকার ক্রম

z-index কিছু না দিলেও একটি নির্দিষ্ট ক্রমে আঁকা হয়, যাকে বলে painting order. একই stacking context-এর ভেতরে পেছন থেকে সামনে:

1. দলের মূল বাক্সের ব্যাকগ্রাউন্ড আর border
2. ঋণাত্মক z-index-এর সদস্যরা (ছোট থেকে বড়)
3. normal flow-এর block বাক্স
4. float বাক্স
5. inline লেখা ও inline বাক্স
6. z-index: auto বা 0-এর positioned সদস্যরা — HTML-এ যে ক্রমে লেখা
7. ধনাত্মক z-index-এর সদস্যরা (ছোট থেকে বড়)

এজন্যই অংশ ২-এর লাল বাক্স “২” কোনো z-index ছাড়াই “৩”-এর ওপরে উঠেছিল — positioned হওয়ায় সে ধাপ ৬-এ আঁকা হয়েছে, আর “৩” ধাপ ৩/৫-এ। আর দুটি positioned বাক্সের z-index সমান হলে HTML-এ যেটি পরে লেখা, সেটিই সামনে।

৭ · top layer — z-index-এর বাইরের একটি স্তর

এতক্ষণের নিয়ম মেনে modal বানানো ঝামেলার: fixed overlay, বিশাল z-index, পূর্বপুরুষে transform বা overflow: hidden নেই তা নিশ্চিত করা। আধুনিক HTML এর মৌলিক সমাধান দিয়েছে — top layer.

top layer হলো পুরো পাতার সব stacking context-এর ওপরে ব্রাউজারের নিজস্ব একটি আলাদা স্তর। তিন ধরনের element সেখানে ওঠে: showModal() দিয়ে খোলা <dialog> আর popover attribute-এর element (দুটিই পর্ব ১১-এ দেখেছেন), আর fullscreen অবস্থার element. top layer-এ ওঠা element-এর ওপর কোনো পূর্বপুরুষের z-index, opacity, transform বা overflow কাজ করে না; DOM-এ যেখানেই থাকুক, সবার ওপরে আঁকা হয়, আর containing block হয় viewport. modal-এর পেছনের আবরণও আলাদা করে বানাতে হয় না — ::backdrop pseudo-element দিয়েই স্টাইল করা যায়।

<!-- পুরোনো উপায়: div + fixed + z-index: 10000 + নিজে focus সামলানো -->
<!-- আধুনিক উপায়: -->
<button popovertarget="help">সাহায্য</button>
<div id="help" popover>ডেলিভারি চার্জ ঢাকার ভেতরে ৬০ টাকা।</div>

<dialog id="confirm">অর্ডারটি নিশ্চিত করবেন?</dialog>
<!-- JavaScript-এ: confirm.showModal()  →  top layer + ::backdrop + পেছনের পাতা inert -->

<dialog> Baseline Widely available, আর popover এখন সব প্রধান ব্রাউজারে আছে — Baseline Newly available. modal dialog-এর বাড়তি লাভ হলো অ্যাক্সেসিবিলিটি: পেছনের পাতা inert হয়ে যায় (Tab চেপে সেখানে যাওয়া যায় না), Esc চাপলে বন্ধ হয়। div দিয়ে বানানো modal-এ এসব নিজে লিখতে হয় — আর AI-এর দেওয়া কোডে প্রায়ই বাদ পড়ে।

আগামীর ঝলক — anchor positioning

tooltip বা dropdown-কে বোতামের ঠিক পাশে বসানো পুরোনো সমস্যা: absolute দিলে পূর্বপুরুষের overflow: hidden কেটে ফেলে, আর top layer-এর popover কাটা না পড়লেও বোতামের পাশে বসবে কীভাবে? উত্তর নতুন anchor positioning: বোতামকে একটি নাম দিন (anchor-name), আর popover-কে বলুন “ওই নোঙরের নিচে বসো” — জায়গা না থাকলে ব্রাউজার নিজেই ওপরে সরিয়ে দেবে। এটি Chromium-ভিত্তিক ব্রাউজারে আগে এসেছে, অন্য প্রধান ব্রাউজারেও সাম্প্রতিক সংস্করণে আসছে — Can I use দেখে নিন; লেখার সময় এটি এখনো Baseline Widely available নয়, তাই পুরোনো ব্রাউজারের জন্য বিকল্প রাখতে হয়। বিস্তারিত পর্ব ৩৭-এ।

৮ · বাস্তব নকশা আর অ্যাক্সেসিবিলিটি

এবার পুরো পর্বকে প্রতিদিনের কাজের সাথে মিলিয়ে নিই। নিচের প্রতিটি নকশায় কোন position আর কেন — একবার চোখ বুলিয়ে নিন:

sticky header যেন focus ঢেকে না দেয়

Tab চাপলে ব্রাউজার focus পাওয়া element-কে দৃশ্যমান করতে স্ক্রল করে, কিন্তু জানে না যে ওপরে একটি sticky বা fixed header বসে আছে — ফলে লিংকটি প্রায়ই header-এর নিচে চাপা পড়ে। WCAG 2.2-তে এজন্য নতুন একটি success criterion যোগ হয়েছে: 2.4.11 Focus Not Obscured (Minimum), স্তর AA — focus পাওয়া element লেখকের বানানো কোনো কিছুর নিচে পুরোপুরি ঢাকা পড়তে পারবে না। সহজ সমাধান হলো ব্রাউজারকে header-এর উচ্চতা জানিয়ে দেওয়া:

header { position: sticky; top: 0; z-index: 10; background: #fff; }
html   { scroll-padding-top: 4.5rem; }   /* header-এর উচ্চতার সমান বা একটু বেশি */

scroll-padding-top বলে দেয়, “স্ক্রল করে কিছু দেখানোর সময় ওপরের এতটুকু জায়গা বাদ রেখো।” এতে #id লিংকে লাফ দিলেও শিরোনাম header-এর নিচে লুকায় না। এটি Baseline Widely available.

চোখের ক্রম বনাম DOM-এর ক্রম

position দিয়ে আপনি একটি element-কে পর্দার যেকোনো জায়গায় দেখাতে পারেন, কিন্তু তাতে HTML-এর ক্রম বদলায় না। screen reader পড়ে HTML-এর ক্রমে, Tab-ও চলে HTML-এর ক্রমে। HTML-এর শেষে লেখা বোতামকে absolute দিয়ে ওপরে দেখালে কীবোর্ডে তার কাছে পৌঁছাতে হবে সবার শেষে। নিয়ম: অর্থের ক্রম HTML-এ ঠিক রাখুন, position শুধু ছোটখাটো ভাসমান অংশের জন্য।

position অ্যাক্সেসিবিলিটির একটি পরিচিত কৌশলের ভিত্তিও — যে লেখা চোখে দেখানোর দরকার নেই কিন্তু screen reader-কে শোনাতে হবে, তার জন্য visually-hidden class:

.visually-hidden {
  position: absolute;          /* flow থেকে সরাও, জায়গা নেবে না */
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);       /* চোখে অদৃশ্য */
  white-space: nowrap;
}

display: none দিলে screen reader-ও লেখাটি পায় না; এই কৌশলে লেখা পর্দায় অদৃশ্য কিন্তু accessibility tree-তে থাকে (পর্ব ১২)।

৯ · AI-এর যুগে — position-এর কাজ AI-কে দিলে কী দেখবেন

“একটা dropdown মেনু বানাও” বললে AI মুহূর্তেই কোড দেয়, আর প্রথম দেখায় সেটা কাজও করে। কিন্তু position-এর বাগ ধরা পড়ে পরে — অন্য component যোগ করলে, মোড়কে অ্যানিমেশন বসালে, বা কেউ কীবোর্ড দিয়ে চালালে। AI পুরোনো কোড থেকে শেখা অভ্যাসও নিয়ে আসে।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এ প্রতিটি absolute element-এর পূর্বপুরুষদের Computed স্টাইলে position আর transform দেখে বের করেছি, ব্রাউজার কোন বাক্সকে containing block ধরছে — আর তা AI-এর তালিকার সাথে মিলেছে
• পুরো পাতা Tab চেপে ঘুরেছি — কোনো focus পাওয়া জিনিস sticky header বা fixed বারের নিচে চাপা পড়েনি
• পাতার মোড়কে পরীক্ষামূলক transform: translateX(0) দিয়ে দেখেছি — fixed অংশগুলো ভেঙে যায় কি না
• DevTools-এর device toolbar-এ ৩২০px চওড়ায় আর ২০০% জুমে দেখেছি — ভাসমান কিছু লেখা ঢেকে দিচ্ছে না
• modal থাকলে নিশ্চিত হয়েছি সেটি <dialog>; অচেনা property MDN-এ পড়েছি, Can I use-এ সাপোর্ট দেখেছি, আর Lighthouse ও validator.w3.org চালিয়েছি