position প্রপার্টি একটি এলিমেন্টের জন্য ব্যবহৃত পজিশনিং পদ্ধতির ধরন নির্ধারণ করে।
পাঁচটি ভিন্ন position মান আছে:
staticrelativefixedabsolutestickyএলিমেন্টগুলো তখন top, bottom, left, এবং right প্রপার্টি ব্যবহার করে পজিশন করা হয়। তবে, position
প্রপার্টি প্রথমে সেট না করলে এই প্রপার্টিগুলো কাজ করবে না। এগুলো position মানের উপর নির্ভর করে ভিন্নভাবেও কাজ করে।
HTML এলিমেন্ট ডিফল্টভাবে static পজিশন করা থাকে।
Static পজিশন করা এলিমেন্ট top, bottom, left, এবং right প্রপার্টি দ্বারা প্রভাবিত হয় না।
position: static;-সহ একটি এলিমেন্ট কোনো বিশেষ উপায়ে পজিশন করা হয় না; এটি সবসময় পেজের স্বাভাবিক প্রবাহ অনুযায়ী পজিশন করা থাকে:
এখানে ব্যবহৃত CSS দেওয়া হলো:
div.static {
position: static;
border: 3px solid #73AD21;
}position: relative;-সহ একটি এলিমেন্ট তার স্বাভাবিক অবস্থানের সাপেক্ষে পজিশন করা হয়।
একটি রিলেটিভভাবে পজিশন করা এলিমেন্টের top, right, bottom, এবং left প্রপার্টি সেট করলে এটি তার স্বাভাবিক অবস্থান থেকে সরে যাবে। এলিমেন্টের ফলে তৈরি হওয়া কোনো ফাঁকা জায়গা পূরণ করতে অন্য কনটেন্ট সমন্বয় করা হবে না।
এখানে ব্যবহৃত CSS দেওয়া হলো:
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}position: fixed;-সহ একটি এলিমেন্ট ভিউপোর্টের সাপেক্ষে পজিশন করা হয়, অর্থাৎ পেজ স্ক্রল করলেও এটি সবসময় একই জায়গায় থাকে। এলিমেন্টটি পজিশন করতে top, right, bottom, এবং left প্রপার্টি ব্যবহার করা হয়।
একটি fixed এলিমেন্ট পেজে সেই জায়গায় কোনো ফাঁকা তৈরি করে না, যেখানে এটি সাধারণত থাকত।
পেজের নিচের-ডান কোণে fixed এলিমেন্টটি লক্ষ্য করুন। এখানে ব্যবহৃত CSS দেওয়া হলো:
position: fixed;div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}position: absolute;-সহ একটি এলিমেন্ট নিকটতম পজিশন করা অ্যানসেস্টরের সাপেক্ষে পজিশন করা হয় (fixed-এর মতো ভিউপোর্টের সাপেক্ষে নয়)।
তবে; একটি absolute পজিশন করা এলিমেন্টের যদি কোনো পজিশন করা অ্যানসেস্টর না থাকে, তাহলে এটি ডকুমেন্ট বডি ব্যবহার করে, এবং পেজ স্ক্রলের সাথে সাথে সরে।
মনে রাখবেন: একটি "পজিশন করা" এলিমেন্ট হলো এমন এলিমেন্ট যার position static ছাড়া অন্য কিছু।
এখানে একটি সহজ উদাহরণ দেওয়া হলো:
এখানে ব্যবহৃত CSS দেওয়া হলো:
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #0054D1;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #0054D1;
}position: sticky;-সহ একটি এলিমেন্ট ব্যবহারকারীর স্ক্রল পজিশনের ভিত্তিতে পজিশন করা হয়।
একটি sticky এলিমেন্ট স্ক্রল পজিশনের উপর নির্ভর করে relative এবং fixed-এর মধ্যে টগল করে। এটি রিলেটিভভাবে পজিশন করা থাকে যতক্ষণ না ভিউপোর্টে একটি নির্দিষ্ট অফসেট পজিশনে পৌঁছায় - তারপর এটি সেখানে "আটকে" যায় (position:fixed-এর মতো)।
sticky পজিশনিং কীভাবে কাজ করে তা বুঝতে এই ফ্রেমের ভেতরে স্ক্রল করার চেষ্টা করুন।
মনে রাখবেন: IE/Edge 15 এবং তার আগের ভার্সনে sticky position সমর্থিত নয়।
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos deserunt porro corrupti, harum quos itaque! Facilis corporis hic tempore, alias repellat minima optio. Ab ea autem mollitia sunt fuga, ut quasi quisquam alias, magni dolore assumenda. Quidem praesentium dicta, totam voluptate, pariatur officia! Voluptates quam ad alias quidem aperiam, adipisci eum ipsam magnam enim, non doloribus suscipit illo consequatur labore ab vero maxime quas ullam dolor, recusandae quos, officiis ipsa. Harum, atque aliquam et doloremque sed eaque temporibus dolores, deserunt rem quibusdam assumenda dicta eius, voluptatibus amet nisi optio consequuntur soluta sequi fuga eum quasi velit odio excepturi impedit. Odio! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, fuga perspiciatis rem asperiores, eum provident temporibus alias magni modi iste tenetur distinctio voluptatem? Quae eveniet, earum eaque. Fugiat labore harum, atque porro, fugit odio amet. Quam, rerum dolore, adipisci laudantium consectetur quae. Neque eius deserunt similique, aliquid quis deleniti eaque, animi atque molestiae magni doloribus officiis fuga aut a expedita in ad vitae illo voluptatem. Unde beatae sint laudantium, ipsa corrupti vel repudiandae cupiditate repellendus ex modi similique dolor laboriosam vitae officia cum aut, consectetur laborum iusto at! Nobis, quisquam sit rerum ea vero, reiciendis eligendi aliquam labore sint quod. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, iste, eligendi. Natus nemo aut quos adipisci, ipsum impedit eligendi, voluptatibus ab qui enim aspernatur, beatae aliquid id molestiae veritatis eveniet harum illo dolor quaerat eos blanditiis explicabo. Optio repellat neque quod nulla molestias ut nisi, corporis minima sint. Perspiciatis, modi vitae vero sit quibusdam magnam quo unde! Nisi iure non illo provident, voluptatum harum, dicta quia facilis, dolorum totam dignissimos maiores, itaque porro unde! Non inventore ullam quidem repellendus neque voluptates distinctio itaque eaque voluptatum ad. Eos repellendus debitis, totam deleniti quidem eligendi alias ratione, est, soluta, facilis rem. Eaque?
মনে রাখবেন: Internet Explorer, Edge 15 এবং তার আগের ভার্সনে sticky পজিশনিং সমর্থিত নয়। Safari-তে একটি -webkit- প্রিফিক্স প্রয়োজন (নিচের উদাহরণ দেখুন)। sticky পজিশনিং কাজ করার জন্য আপনাকে অবশ্যই top, right, bottom, বা left-এর অন্তত একটি উল্লেখ করতে হবে।
এই উদাহরণে, আপনি এর স্ক্রল পজিশনে পৌঁছালে sticky এলিমেন্টটি পেজের উপরে (top: 0) আটকে যায়।
div.sticky {
position: -webkit-sticky; /* Safari-এর জন্য */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}এলিমেন্ট পজিশন করা হলে, সেগুলো অন্য এলিমেন্টের সাথে ওভারল্যাপ করতে পারে।
z-index প্রপার্টি একটি এলিমেন্টের স্ট্যাক অর্ডার নির্ধারণ করে (কোন এলিমেন্টটি অন্যদের সামনে, বা পেছনে থাকবে)।
একটি এলিমেন্টের ধনাত্মক বা ঋণাত্মক স্ট্যাক অর্ডার থাকতে পারে:
ইমেজের z-index -1 হওয়ায়, এটি টেক্সটের পেছনে রাখা হবে।
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}বেশি স্ট্যাক অর্ডারযুক্ত একটি এলিমেন্ট সবসময় কম স্ট্যাক অর্ডারযুক্ত এলিমেন্টের সামনে থাকে।
মনে রাখবেন: z-index নির্ধারিত না থাকলে দুটি পজিশন করা এলিমেন্ট ওভারল্যাপ করলে, HTML কোডে সর্বশেষ পজিশন করা এলিমেন্টটি উপরে দেখানো হবে।
একটি ইমেজের উপর কীভাবে টেক্সট পজিশন করবেন:
| প্রপার্টি | বিবরণ |
|---|---|
| bottom | একটি পজিশন করা বক্সের নিচের মার্জিন এজ সেট করে |
| clip | একটি অ্যাবসোলিউটভাবে পজিশন করা এলিমেন্ট ক্লিপ করে |
| left | একটি পজিশন করা বক্সের বামের মার্জিন এজ সেট করে |
| position | একটি এলিমেন্টের জন্য পজিশনিংয়ের ধরন নির্ধারণ করে |
| right | একটি পজিশন করা বক্সের ডানের মার্জিন এজ সেট করে |
| top | একটি পজিশন করা বক্সের উপরের মার্জিন এজ সেট করে |
| z-index | একটি এলিমেন্টের স্ট্যাক অর্ডার সেট করে |