সিএসএস পজিশন (CSS Position) 🚞
Post No:22
আসসালামুয়ালাইকুম আশা করি সবাই অনেক ভালো আছেন আজকে আমরা CSS Position সম্পর্কে জানবো।
আমার আগের ব্লগ গুলা পড়ার জন্যে লিংকে ক্লিক করুন:
hashnode.com/@Labib
সিএসএস পজিশন (CSS Position)
Web এ একটি HTML Element এর Position কোথায় হবে তা নির্ধারণের জন্যে CSS Position Property ব্যবহৃত হয়। আরো সহজ ভাবে বলা যায় একটি HTML Element এর Position সেট করার জন্য CSS Position Property ব্যবহার করা হয়।
CSS এ Position Property এর ভ্যালুসমূহঃ
static
relative
fixed
absolute
sticky
CSS এ Position Property এর গ্লোবাল(global) ভ্যালুসমূহঃ
inherit
initial
unset
উপরের Position Property ব্যবহারের পর HTML Element গুলোর পজিশন ঠিক করে দেওয়ার জন্য আপনাকে top, bottom, left এবং right প্রোপার্টি গুলোর যেটা দরকার সেটি ব্যবহার করতে হবে।আর আপনি যদি প্রথমেই position প্রোপার্টি না সেট করে দেন তাহলে এই প্রোপার্টিসমূহ ঠিকমত কাজ করবে না। কারণ, এই প্রোপার্টিগুলো position প্রোপার্টির ভ্যালুর উপরে নির্ভরশীল।
এখন চলুন প্রথমে CSS এ Position Property সমূহের এর ভ্যালুসমূহ নিয়ে আলোচনা করা যাক:
Position:static;
ডিফল্টভাবে HTML Element সমূহের পজিশন static থাকে। আর তখন top, right, bottom এবং left প্রোপার্টির ভ্যালু সমূহ কাজ করেনা। অর্থাৎ position: static; প্রোপার্টি সংশ্লিষ্ট HTML Element তার নিজের পজিশন পরিবর্তন করতে পারে না। এটি সব সময় পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়ে থাকে। নিচের উদাহরণ লক্ষ্য করুন:
<!DOCTYPE html>
<html>
<head>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; i
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static; </div>
</body>
</htnl>
Output
ব্যাখ্যা: উপরের উদাহরণে সিলেক্টর .static-তে position: static; ব্যবহার করায় ইহা পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়েছে।
position:relative;
position:relative; ও static এর মতই পার্থক্য হচ্ছে এখানে আপনি চাইলে top, left, bottom, right এবং z-index ব্যবহার করে HTML Element কে তার অবস্থান থেকে সরাতে পারবেন। এমনকি অন্য একটা element এর উপর ও বসাতে পারবেন। relative পজিশন করলে এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে। নিচের উদাহরণ দেখুন:
<!D0CTYPE html>
<html>
<tittle> Position Static Example</title>
<style>
.box {
display: inline-block;
background: green;
width: 100px;
height: 16epx;
color: white;
padding: 5px;
}
#two {
position: relative;
top: 3epx;
left: 40px;
}
<style>
</head>
<body>
<div class="box" id="one">0ne</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
</body>
</html>
Output
ব্যাখ্যা: উপরের উদাহরণে সিলেক্টর #two-তে position: relative; ব্যবহার করায় এর নিজের সাপেক্ষে অবস্থানের পরিবর্তন ঘটেছে।
position:absolute;
Position: আমরা যখন কোন ইলিমেন্ট কে position absolute দিব তখন অবশ্যই তার প্যারেন্ট এলেমেন্ট কে পজিশন রিলেটিভ দিতে হবে। যদি আমরা তার প্যারেন্ট এলেমেন্ট কে পজিশন রিলেটিভ না দেই তাহলে body tag কে প্যারেন্ট এলেমেন্ট হিসেবে ধরে নিবে।
absolute ও static এর মতই, পার্থক্য হচ্ছে এখানে HTML Element তার নিকটবর্তী পূর্বসুরী(ancestor) Element এর অবস্থানের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটে। এক্ষেত্রে , যদি Absolute পজিশনে থাকা এলিমেন্টের কোনো পূর্বসুরী না থকে তাহলে ইহা ডকুমেন্ট বডি(body) কে পূর্বসুরী ধরে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে এবং পেজ স্ক্রলিং এর সাথে সাথে নড়া চড়া করে। এবং সৃষ্ট ফাঁকা অংশ পার্শ্ববর্তী অন্য HTML Element এসে পূরণ করে। নিচের উদাহরণ দেখুন:
<!DOCTYPE html>
<html>
<head>
<title> Position:absolute</title>
<style>
.box1 {
display: inline-block;
background: orange;
width: 100px;
height: 16epx;
color: white;
padding: 5px;
}
.box 2 {
display: inline-block;
background: purple;
width: 100px;
height: 16epx;
color: white;
padding: 5px;
}
.box3 {
display: inline-block;
background: magenta;
width: 100px;
height: 16epx;
color: white;
padding: 5px;
position: absolute;
top: 3epx;
left: 30px;
}
</style>
</head>
<div class="box1" id="one">0ne</div>
<div class="box2" id="two">Two</div>
<div class="box3" id="three">Threec/div>
</body>
</html>
Output
**ব্যাখ্যা:**উপরের উদাহরণে সিলেক্টর #two-তে position: absolute; ব্যবহার করায় পূর্বসুরী(ancestor) HTML Element এর সাপেক্ষে সিলেক্টর #two নিজের অবস্থানের পরিবর্তন ঘটিয়েছে।
position:fixed;
position: fixed; যুক্ত HTML Element গুলো viewport এর সাপেক্ষে নিজের পজিশনের পরিবর্তন ঘটাতে পার। অর্থ্যাৎ পেজ স্ক্রল করলেও ইহা নিজের অবস্থান থেকে এক বিন্দুও নড়ে না। চলুন একটা উদাহরণ দিয়ে দেখা যাক:
<!DOCTYPE html>
<html>
<head>
<title>Css Position Fixed</title>
<style>
.box {
background: orange;
width: 100px;
height: 100px;
color: white;
margin: 10px;
}
#three {
position: Fixed;
top: 50px;
right: 50px;
}
</style>
</head>
<body>
<div class="box" id="0ne">0ne</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="Four">Four</div>
<div class="box" id="Five">Fivec/div>
<div class="box" id="six">Six</div>
</body>
</html>
Output
CSS Position Fixed
ব্যাখ্যা: উপরের উদাহরণে সিলেক্টর #three-তে position: fixed; ব্যবহার করায় এটি viewport এর সাপেক্ষে পজিশন ফিক্সড রয়েছে। এখন যদি আপনি ব্রউজারকে মিনিমাইজ করেন , তাহলে দেখবে এটি স্ক্রল করবে , #three সিলেক্টর ফিক্সড থাকবে।
position: sticky;
position: sticky; যুক্ত HTML Element ইউজারের পেজ স্ক্রলের সাপেক্ষে নিজের অবস্থানের পরিবর্তন হয়। তা ছাড়া স্ক্রল পজিশনের উপর ভিত্তি করে position: sticky একইসাথে Relative এবং Fixed পজিশনের মধ্যে toggle করে। চলুন একটা উদাহরণ দিয়ে দেখা যাক:
<!DOCTYPE html>
<html>
<head>
<tit1>Css Position Sticky Example</title>
<style>
*{
box-sizing: border-box;}
dl>div{
padding: 24px @ © 8;
}
dt{
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717085;
color: #FFF;
margin: 6;
padding: 2px @ @ 12px;
position: sticky;
position: sticky;
top: -1px;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 6;
padding: 6 © 8 12px;
white-space: nowrap;}
dd + dd {
border-top: 1px solid #CCC
}
</style>
</head>
<body>
<h2>Alphabetical 1ist of countries</n?>
<dl>
<div>
<dd>Afghanistan</dd>,
<dd>Argentinac</dd>
<dd>Australiac</dd>
<dd>Austriac</do>
<dd>Armeniac</do>
</div>
<div>
<dt>B</dt>
<dd>Bangladesh</dd>
<dd>Bahrain</dd>
</div>
</body>
</html>
Output
CSS Position Sticky
এবার চলুন এক নজরে CSS Position Property এর সাথে কাজ করে এমন Property সমূহ সম্পর্কে জানা যাক:
bottom
clip
left
right
top
z-index
CSS bottom Property
CSS এ position:absolute এ থাকা HTML Element এর জন্য bottom প্রোপার্টিটি একটি এলিমেন্টের bottom এর কিনারার একটি ইউনিটের উপরে/নিচে নিকটতম ancestor সেট করে।
পরামর্শঃ
যদি একটি absolute পজিশনে থাকা এলিমেন্টের কোনো positioned ancestors না থাকে তাহলে এটি ডকুমেন্টের পুরো বডি ব্যবহার করে এবং পেজে এটি স্ক্রলিং তৈরি করে।
শুধু স্ট্যাটিক ছাড়া একটি “positioned” এলিমেন্ট যেকোনো পজিশনে থাকতে পারে।
relative পজিশন এলিমেন্টের জন্য bottom প্রোপার্টিটি একটি এলিমেন্টের bottom এর কিনারার একটি ইউনিটের উপরে/নিচে নরমাল পজিশনকে সেট করে।
যদি “position:static” হয়, তাহলে bottom প্রোপার্টির কোনো ইফেক্ট থাকে না।
CSS bottom প্রোপার্টির ভ্যালু-সমূহ
auto– bottom এর কিনারার পজিশন ব্রাউজারে গননা(calculate) করে। এটি ডিফল্ট।
length– bottom এর কিনারার পজিশন পিক্সেল,সেন্টিমিটার ইত্যাদিতে প্রকাশ করা হয়। নেগেটিভ ভ্যালুও গ্রহনযোগ্য।
%-কন্টেইনিং এলিমেন্টের bottom এর কিনারার পজিশন শতকরায়(%) সেট করুন।নেগেটিভ ভ্যালুও গ্রহনযোগ্য।
initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
**CSS left Property
**absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের বাম প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।
পরামর্শঃ
যদি absolute পজিশন এলিমেন্টে কোনো পজিশন encestor(পূর্বপুরুষ) না থাকে,এটি ডকুমেন্ট বডি এবং পেইজ স্ক্রলিংয়ের সাথে ব্যবহৃত হয়।
একটি “পজিশন” এলিমেন্ট এমন একটি এলিমেন্ট যার পজিশন স্ট্যাটিক ছাড়া যেকোনো কিছু ই হতে পারে।
রিলেটিভ পজিশন এলিমেন্টে left প্রোপার্টি যুক্ত করা হয় একটি এলিমেন্টের বাম প্রান্তে,তবে এটি ডানে অথবা বামে উভয়দিকেই থাকে।
যদি “Position: Static” দেওয়া হয়,তবে left প্রোপার্টির কোনো প্রতিক্রিয়া হবেনা।
left প্রোপার্টির ভ্যালু-সমূহ
auto– ব্রাউজারটি বামের কিনারের অবস্থানকে হিসাব করে। এটি ডিফল্ট আকারে থাকে।
length– বামপাশে কিনারের অবস্থানকে px, cm ইত্যাদি এককে নির্ধারন করে। নেগেটিভ ভ্যালুও গ্রহনীয়।
%-বামপাশে কিনার অবস্থানে % এলিমেন্টকে বুঝানো হয়। নেগিটিভ ভ্যালুও গ্রহনীয়।
initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
CSS Right Property
absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের ডান প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।
পরামর্শঃ
auto– ব্রাউজারটি ডান কিনারের অবস্থানকে হিসাব করে। এটি ডিফল্ট আকারে থাকে।
length– ডানপাশের কিনারের অবস্থানকে px, cm ইত্যাদি এককে নির্ধারন করে। নেগেটিভ ভ্যালুও গ্রহনীয়।
%-ডানপাশের কিনার অবস্থানে % এলিমেন্টকে বুঝানো হয়। নেগিটিভ ভ্যালুও গ্রহনীয়।
initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
CSS top Property
CSS absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের উপর থেকে দূরত্ব নির্ধারণ করে।
top প্রোপার্টির ভ্যালু-সমূহ
auto– ব্রাউজারটি top থেকে হিসাব করে। এটি ডিফল্ট আকারে থাকে।
length– top অবস্থানকে px, cm ইত্যাদি এককে নির্ধারন করে। নেগেটিভ ভ্যালুও গ্রহনীয়।
%-top অবস্থানে % এলিমেন্টকে বুঝানো হয়। নেগিটিভ ভ্যালুও গ্রহনীয়।
initial– সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে।
inherit– এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
CSS z-index property
HTML Element সমূহের স্ট্যাক অর্ডার(stack order) নির্ধারণ করার জন্য CSS z-index প্রোপার্টি ব্যবহার করা হয়।
একটি এলিমেন্টের ধনাত্মক(+) অথবা ঋনাত্মক(-) স্ট্যাক অর্ডার থাকতে পারে। স্ট্যাক অর্ডারের ভ্যালু যত বেশী হবে সে এলিমেন্টটি তত বেশি সামনে থাকবে। পক্ষান্তরে স্ট্যাক অর্ডারের ভ্যালু যত কম হবে সে এলিমেন্টটি তত বেশি পেছনে থাকবে।
—ধন্যবাদ
