অবস্থান


ওয়েব পেজে বিভিন্ন HTML উপাদান সমূহ কোথায় কিভাবে প্রদর্শিত হবে তা প্রকাশ করার জন্য position প্রোপার্টি ব্যবহার করা হয়। এর সাথে top, bottom, left, and right প্রোপার্টি সমূহ ব্যবহার করে কোন HTML উপাদানের প্রকৃত অবস্থান নির্ধারণ করা হয়।



position প্রোপার্টির চার ধরণের মান হতে পারে। এগুলো হচ্ছে,

i) পজিশন স্ট্যাটিক
ii) পজিশন ফিক্সড
iii) পজিশন রিলেটিভ
iv) পজিশন এবসলিউট



পজিশন স্ট্যাটিক


কোন একটি HTML উপাদানের পজিশন প্রোপার্টি যদি স্ট্যাটিক করে দেওয়া হয়; তাহলে তা HTML উপাদান সমূহের সাধারণ এবং স্বভাবিক পজিশন নির্দেশ করবে। এক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহ ডিক্লারেশন করলেও এ অনুযায়ী কোন কাজ হবে না; অর্থাৎ top, bottom, left, and right প্রোপার্টি সমূহ নিস্ক্রিয় হয়ে যাবে।



উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: static</h2>

<div class="static">
This div element has position: static
</div>

</body>
</html>


পজিশন ফিক্সড


কোন একটি HTML উপাদানকে মনিটর স্ক্রিনের সাপেক্ষে কোন নির্দিষ্ট স্থানে স্থিরভাবে স্থাপন করার জন্য পজিশন ফিক্সড ব্যবহার করা হয়। এজন্য প্রথমে position:fixed; ডিক্লারেশন করে, এর পর top, bottom, left, and right প্রোপার্টি সমূহ ডিক্লারেশন করতে হয়। 



উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: fixed</h2>

<div class="fixed">
This div element has position: fixed.
</div>

</body>
</html>






পজিশন রিলেটিভ



HTML উপাদান সমূহের স্বাভাবিক অবস্থানের সাপেক্ষে top, bottom, left, and right প্রোপার্টি ব্যবহারের মাধ্যমে কোন বস্তুর অবস্থান নির্ধারণের জন্য রিলেটিভ পজিশন প্রোপার্টি ব্যবহার করা হয়। পজিশন প্রোপার্টি যদি স্ট্যাটিক করে দেওয়া হয়, তাহলে তা HTML উপাদান সমূহের সাধারণ এবং স্বভাবিক পজিশন নির্দেশ করে, কিন্তু পজিশন রিলেটিভ এবং পজিশন স্ট্যাটিক প্রোপার্টির মধ্যে পার্থক্য হচ্ছে পজিশন স্ট্যাটিক প্রোপার্টির ক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহ নিস্ক্রিয় থাকে; আর পজিশন রিলেটিভ প্রোপার্টির ক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহের মাধ্যমেই কোন বস্তুর অবস্থান নির্দেশ করা হয়।
পজিশন রিলেটিভ প্রোপার্টির ক্ষেতে সকল হিসাব শুরু হয় ঐ উপাদানটির স্বাভাবিক অবস্থান থেকে। অর্থাৎ পজিশনিং না করা হলে উপাদানটি যে স্থানে অবস্থান করতো সেখান থেকে।

উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative</h2>

<div class="relative">
This div element has position: relative.
</div>

</body>
</html>





পজিশন এবসলিউট


HTML উপাদান সমূহের প্রকৃত অবস্থান নির্ধারণের জন্য পজিশন এবসলিউট প্রোপার্টি ব্যবহার করা হয়। কোন একটি HTML উপাদানের পজিশন প্রোপার্টি যদি এবসলিউট করে দেওয়া হয় তাহলে তার অবস্থান স্বভাবিক ক্রমে নির্দেশিত হয় না, এক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহের মাধ্যমে ঐ উপাদানটির অবস্থান নির্ধারিত হয়। এক্ষেত্রে অন্য একটি উপাদানের উপরেও ওভারল্যাপ করে ঐ উপাদানটির অবস্থান নির্ধারণ করা সম্ভব হয়।


উদাহরণ :--

<!DOCTYPE html>
<html>
<head>

<style>
div.relative {
    position: relative;
    width: 300px;
    height: 200px;
    border: 3px solid #73AD21;
}

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute</h2>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>


আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন।
এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন