সিএসএস পজিশন
একটি এলিমিন্টের পজিশন স্ট্যাটিক(static), রিলেটিভ(relative), ফিক্সড(fixed), এবসোলিউট(absolute) নাকি স্টিকি(sticky) হবে তা নির্ধারণ করার জন্য সিএসএস position প্রোপার্টি ব্যবহার করা হয়।
অর্থাৎ একটি এলিমেন্টের পজিশন সেট করার জন্য সিএসএস position প্রোপার্টি ব্যবহার করা হয়।
positionপ্রোপার্টির কীওয়ার্ড(keyword) ভ্যালুসমূহঃ
position: static;position: relative;position: fixed;position: absolute;position: sticky;
position প্রোপার্টির গ্লোবাল(global) ভ্যালুসমূহঃ
position: inherit;position: initial;position: unset;
এরপরে এলিমেন্টগুলোর পজিশন ঠিক করে দেওয়ার জন্য top, bottom, left এবং right প্রোপার্টি ব্যবহার করা হয়।
যাইহোক, আপনি যদি প্রথমেই position প্রোপার্টি না সেট করে দেন তাহলে এই প্রোপার্টিসমূহ ঠিকমত কাজ করবে না। কারণ, এই প্রোপার্টিগুলো position প্রোপার্টির ভ্যালুর উপরে নির্ভরশীল।
এক নজরে সিএসএস পজিশন প্রোপার্টিসমূহ
absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের নিচ প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।
absolute পজিশনে থাকা একটি এলিমেন্টের কতটুকু অংশ দৃশ্যমান হবে তা নির্ধারণ করে।
কি ধরণের মাউস কার্সর প্রদর্শিত হবে তা নির্ধারণ করে।
absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের বাম প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।
একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।
একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে তার ডানে বা বামে কি হবে তা নির্ধারণ করে।
একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে তার উপরে বা নিচে কি হবে তা নির্ধারণ করে।
একটি এলিমেন্টের পজিশনের ধরন নির্ধারণ করে।
absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের ডান প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।
absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের উপর প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।
একটি এলিমেন্টের stack order সেট করে।
position:static;
এইচটিএমএল এলিমেন্টসমূহের ডিফল্টভাবে পজিশন স্ট্যাটিক থাকে।
এলিমেন্টের পজিশন স্ট্যাটিক থাকলে top, right, bottom এবং left প্রোপার্টির ভ্যালুসমূহের কোনো প্রভাব থাকে না।
position: static; প্রোপার্টি সংশ্লিষ্ট এলিমেন্ট বিশেষ কোনো পদ্ধতিতে তার নিজের পজিশন পরিবর্তন করতে পারে না। এটি সব সময় পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়ে থাকে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.box {
display: inline-block;
background: orange;
width: 100px;
height: 100px;
color: white;
padding: 5px;
}
#two {
position: static;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
</body>
</html>
ফলাফল
উপরের উদাহরণে সিলেক্টর #two-তে position: static; ব্যবহার করায় ইহা পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়েছে।
position:relative;
position: relative; প্রোপার্টি সংশ্লিষ্ট এলিমেন্ট তার নিজের সাপেক্ষে পজিশন পরিবর্তন করতে পারে।
position: relative; প্রোপার্টি সংশ্লিষ্ট এলিমেন্টের স্বাভাবিক অবস্থানের পরিবর্তন ঘটানোর জন্য top, right, bottom অথবা left প্রোপার্টি ব্যবহার করা হয়।
এক্ষেত্রে এর পার্শ্ববর্তী অন্য এলিমেন্ট এসে এই ফাঁকা অংশ পূরণ করে না। অর্থাৎ ফাঁকা অংশ ফাঁকাই রয়ে যাবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.box {
display: inline-block;
background: orange;
width: 100px;
height: 100px;
color: white;
padding: 5px;
}
#two {
position: relative;
top: 30px;
left: 40px;
}
</style>
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
</body>
</html>
ফলাফল
উপরের উদাহরণে সিলেক্টর #two-তে position: relative; ব্যবহার করায় এর নিজের সাপেক্ষে অবস্থানের পরিবর্তন ঘটেছে।
position:absolute;
position: absolute; যুক্ত একটি এলিমেন্ট তার নিকটবর্তী পূর্বসুরী(ancestor) এলিমেন্টের অবস্থানের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে।
যাই হোক, যদি Absolute পজিশনে থাকা এলিমেন্টের কোনো পূর্বসুরী না থকে তাহলে ইহা ডকুমেন্ট বডি(body) কে পূর্বসুরী ধরে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে এবং পেজ স্ক্রলিং এর সাথে সাথে নড়া চড়া করে।
এক্ষেত্রে সৃষ্ট ফাঁকা অংশ পার্শ্ববর্তী অন্য এলিমেন্ট এসে পূরণ করে।
বিঃদ্রঃ static পজিশন ব্যতীত সবগুলো এলিমেন্টই নিজের অবস্থানের পরিবর্তন ঘটাতে পারে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.box {
display: inline-block;
background: orange;
width: 100px;
height: 100px;
color: white;
padding: 5px;
}
#two {
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
</body>
</html>
ফলাফল
উপরের উদাহরণে সিলেক্টর #two-তে position: absolute; ব্যবহার করায় পূর্বসুরী(ancestor) এলিমেন্টের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটিয়েছে।
position:fixed;
position: fixed; যুক্ত একটি এলিমেন্ট viewport এর সাপেক্ষে নিজের পজিশনের পরিবর্তন ঘটাতে পার। অর্থ্যাৎ পেজ স্ক্রল করলেও ইহা নিজের অবস্থান থেকে এক বিন্দুও নড়ে না।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.box {
background: orange;
width: 100px;
height: 100px;
color: white;
margn: 10px;
}
#three {
position: fixed;
top: 50px;
right: 10px;
}
</style>
</head>
<body>
<div class="box" id="one">One</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">Five</div>
<div class="box" id="six">Six</div>
</body>
</html>
ফলাফল
উপরের উদাহরণে সিলেক্টর #three-তে position: fixed; ব্যবহার করায় এটি viewport এর সাপেক্ষে পজিশন ফিক্সড রয়েছে।
position: sticky;
position: sticky; যুক্ত এলিমেন্ট ইউজারের পেজ স্ক্রলের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে। স্ক্রল পজিশনের উপর ভিত্তি করে এটি Relative এবং Fixed অবস্থানের মধ্যে টোগল করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
* {
box-sizing: border-box;
}
dl > div {
padding: 24px 0 0 0;
}
dt {
background: #B8C1C8;
border-bottom: 1px solid #989EA4;
border-top: 1px solid #717D85;
color: #FFF;
margin: 0;
padding: 2px 0 0 12px;
position: sticky;
position: sticky;
top: -1px;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #CCC
}
</style>
</head>
<body>
<dl>
<div>
<dt>A</dt>
<dd>Andrew W.K.</dd>
<dd>Apparat</dd>
<dd>Arcade Fire</dd>
<dd>At The Drive-In</dd>
<dd>Aziz Ansari</dd>
</div>
<div>
<dt>C</dt>
<dd>Chromeo</dd>
<dd>Common</dd>
<dd>Converge</dd>
<dd>Crystal Castles</dd>
<dd>Cursive</dd>
</div>
<div>
<dt>E</dt>
<dd>Explosions In The Sky</dd>
</div>
<div>
<dt>T</dt>
<dd>Ted Leo & The Pharmacists</dd>
<dd>T-Pain</dd>
<dd>Thrice</dd>
<dd>TV On The Radio</dd>
<dd>Two Gallants</dd>
</div>
</dl>
</body>
</html>
ফলাফল
z-index এর ব্যবহার
একটি পজিশনে থাকা এলিমেন্টের উপর অন্য একটি এলিমেন্ট এসে সমাপতিত(overlap) হতে পারে। এতে আগের এলিমেন্টি উড়ে এসে জুড়ে বসা এলিমেন্টের নিচে চাপা পড়ে অদৃশ্য হয়ে যেতে পারে।
এলিমেন্টসমূহের স্ট্যাক অর্ডার(stack order) নির্ধারণ করার জন্য সিএসএস z-index প্রোপার্টি ব্যবহার করা হয়।
একটি এলিমেন্টের ধনাত্মক(+) অথবা ঋনাত্মক(-) স্ট্যাক অর্ডার থাকতে পারেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
<p>z-index প্রোপার্টির ভ্যালু -1 ব্যবহার করায় ইহা টেক্সটের পেছনে অবস্থান নিয়েছে।</p>
<img src="../css_example/satt.png" width="100" height="100">
</body>
</html>
ফলাফল
স্ট্যাক অর্ডারের ভ্যালু যত বেশী হবে সে এলিমেন্টটি তত বেশি সামনে থাকবে। পক্ষান্তরে স্ট্যাক অর্ডারের ভ্যালু যত কম হবে সে এলিমেন্টটি তত বেশি পেছনে থাকবে।
বিঃদ্রঃ যদি দুইটি অবস্থানকৃত এলিমেন্ট z-index ছাড়া সমাপতিত (overlap) হয় তখন এলিমেন্টের শেষ অবস্থানের এইচটিএমএল কোড উপরে দেখাবে।
একটি ইমেজে টেক্সটের পজিশন
নিচের উদাহরণে দেখানো হয়েছে, কিভাবে একটি ইমেজের উপর টেক্সটের পজিশন নির্ধারণ করা হয়।
ছবিতে লেখা
কিভাবে একটি ইমেজের উপর লেখা যায় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
.img-container {
position: relative;
width: 100%;
}
.top-left {
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
.top-right {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 18px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
.text-center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<div class="img-container">
<img src="nilgiri.jpg" alt="satt">
<div class="top-left">উপরে-বামে লেখা </div>
<div class="top-right">উপরে-ডানে লেখা</div>
<div class="bottom-left">নিচে-বামে লেখা</div>
<div class="bottom-right">নিচে-ডানে লেখা</div>
<div class="text-center">মাঝখানে লেখা</div>
</div>
</body>
</html>
ফলাফল