সিএসএস পজিশন - Css Position



সিএসএস positioning প্রপার্টি ব্যবহার করে কোন এলিমেন্টের অবস্থান বা position নির্ধারণ করা যায়। একটি এলিমেন্টের সাথে অন্য কোন এলিমেন্ট এর অবস্থান কি রকম হবে বা যদি কোন এলিমেন্ট এর আকার বড় হয় তবে তার অবস্থান কি রকম হবে তা নির্ধারণ করা হয় position প্রপার্টি ব্যবহার করে।

top, bottom, left এবং right প্রপার্টি ব্যবহার করে এলিমেন্ট পজিসনিং করা যায়। তবে যতক্ষণ পর্যন্ত position প্রপার্টি নির্ধারণ করা না হয় ততক্ষণ এই প্রপার্টি গুলো কাজ করবে না।


css positioning example

পজিসনিং এর প্রকার

position প্রপার্টি চার প্রকার হতে পারে। এগুলো হল -
Static Positioning, Fixed Positioning, Relative Positioning এবং Absolute Positioning.


Static Positioning

এইচটিএমএল এলিমেন্টগুলোর সাধারন এবং স্বাভাবিক অবস্থান বা position ই হল Static Position. এইচটিএমএল এলিমেন্টগুলোর স্বয়ংক্রিয় বা default ভাবেই Static অবস্থান বা position প্রদর্শিত হয়। ওয়েব পেজের স্বাভাবিক প্রদর্শন নিয়মই হল Static Positioning.

Static positioned এলিমেন্টগুলোর top, bottom, left এবং right প্রপার্টি দ্বারা প্রভাবিত হয় না। অর্থাৎ top, bottom, left এবং right প্রপার্টিগুলো ডিক্লারেসন করলেও এগুলো কোন কাজ করবে না। static position ডিক্লারেসন করলে এগুলো নিষ্ক্রিয় থাকবে।


Fixed Positioning

কোন এইচটিএমএল এলিমেন্টকে মনিটর screen এর সাপেক্ষে কোন নির্দিষ্ট স্থানে স্থিরভাবে স্থাপন করার জন্য fixed position ব্যবহার করা হয়।
এজন্য প্রথমে " position:fixed " ডিক্লারেশন করে তারপর top, bottom, left ও right প্রপার্টিগুলো ডিক্লারেশন করতে হয়।

ব্রাউজার window scroll করা হলেও Fixed Position এ থাকা এলিমেন্টগুলো সরে যায় না বা scroll বা move করে না।

কোড দেখুন

p.pos_fixed{
position:fixed;
top:30px;
right:5px;
}


নোট - IE7 এবং IE8 ক্ষেত্রে যদি একটি ডকটাইপ ডিক্লারেশন করা হয় তবেই Fixed Position কাজ করবে। Fixed positioned এলিমেন্টগুলোর অন্য এলিমেন্টকে overlap করে।


Relative Positioning

এইচটিএমএল এলিমেন্টগুলোর স্বাভাবিক অবস্থানের সাপেক্ষে top, bottom, left এবং right প্রপার্টি ব্যবহার করে কোন এলিমেন্টের অবস্থান বা position নির্ধারণ করতে relative position প্রপার্টি ব্যবহার করা হয়।
একটি relative positioned element হল এমন একটি অবস্থান বা position যখন এলিমেন্টগুলোর স্বাভাবিক অবস্থানের সাথে relative অবস্থায় থাকে।

static এবং relative পজিসন এর মূল পার্থক্য হল static position প্রপার্টির ক্ষেত্রে top, bottom, left এবং right প্রপার্টিগুলো নিষ্ক্রিয় থাকে আর relative position এর ক্ষেত্রে top, bottom, left এবং right প্রপার্টিগুলোর দ্বারাই কোন এলিমেন্টের অবস্থান বা position নির্ধারিত হয়।

relative position প্রপার্টির ক্ষেত্রে সকল হিসাব করতে হয় ঐ এলিমেন্টের স্বাভাবিক অবস্থান থেকে অর্থাৎ positioning না করা হলে এলিমেন্টটি যেখানে অবস্থান করতো সেখান থেকে।

কোড দেখুন

h2.pos_left{
position:relative;
left:-20px;
}
h2.pos_right{
position:relative;
left:20px;
}


relative positioned এলিমেন্টের কন্টেন্টগুলো অন্য এলিমেন্টকে move বা overlap করতে পারে। কিন্তু এলিমেন্টের reserved space স্বাভাবিক নিয়ম অনুসারেই এখন reserve রয়েছে।

কোড দেখুন

h2.pos_top{
position:relative;
top:-50px;
}


Relatively positioned element, absolutely positioned element এর জন্য container block রূপে ব্যাবহৃত হয়।


Absolute Positioning

এইচটিএমএল এলিমেন্টগুলোর প্রকৃত অবস্থান নির্ধারণ করার জন্য Absolute Position ব্যবহার করা হয়। কোন এইচটিএমএল এলিমেন্টের position প্রপার্টির মান absolute নির্ধারণ করা হলে তার অবস্থান স্বাভাবিক ক্রমে নির্ধারিত হয় না। এক্ষেত্রে top, bottom, left এবং right প্রপার্টিগুলো ব্যবহার করে ঐ এলিমেন্টের অবস্থান নির্ধারণ করতে হয়।

আবার অন্য কোন এলিমেন্টের ওপরেও ওভারল্যাপ করে ঐ এলিমেন্টের অবস্থান বা position নির্ধারণ করা যায়।

কোড দেখুন

h2{
position:absolute;
left:100px;
top:150px;
}


Absolute Positioned এলিমেন্ট অন্য এলিমেন্টগুলোকে overlap করে।


Overlapping Element

z-index property কোন এলিমেন্টের stack order অর্থাৎ অর্থাৎ কোন এলিমেন্টটি সামনে প্রদর্শিত হবে, কোনটি অন্য এলিমেন্টের পেছনে প্রদর্শিত হবে ইত্যাদি নির্দিষ্ট করে।

z-index প্রপার্টি অথবা stack order এর মান বা value হতে পারে positive বা negative.

কোড দেখুন

img{
position:absolute;
left:0px;
top:0px;
z-index:-1
}


যে এলিমেন্টের stack order এর মান বেশী সেটা সর্বদা সামনের দিকে এবং যে এলিমেন্টের stack oeder এর মান কম সেটা সর্বদা পেছনের দিকে প্রদর্শিত হবে।


সিএসএসের সব পজিসনিং প্রপার্টি

প্রপার্টি বর্ণনা মান CSS
bottom একটি positioned এলিমেন্টের নিচ দিকের মার্জিনের কিনারা নির্ধারণ করে। auto
length
%
inherit
2
clip কোন absolutely positioned এলিমেন্টের Clip shape
auto
inherit
2
cursor কি রকম কার্সর প্রদর্শিত হবে তা নির্ধারণ করে। url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
2
left একটি positioned এলিমেন্টের বাম পাশের মার্জিনের কিনারা নির্ধারণ করে। auto
length
%
inherit
2
overflow
নির্দিষ্ট করে কি হবে যদি বিষয়বস্তু বা content একটি উপাদান বা element কে overflow করে। auto
hidden
scroll
visible
inherit
2
position কোন এলিমেন্টের অবস্থান বা position নির্ধারণ করে। absolute
fixed
relative
static
inherit
2
right একটি positioned এলিমেন্টের ডান পাশের মার্জিনের কিনারা নির্ধারণ করে। auto
length
%
inherit
2
top একটি positioned এলিমেন্টের ওপরের মার্জিনের কিনারা নির্ধারণ করে। auto
length
%
inherit
2
z-index কোন এলিমেন্টের stack order নির্ধারণ করে। number
auto
inherit
2






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.