CSS ২০১৮

position প্রতিভা নির্দেশ এলিমেন্টের অবস্থান পদ্ধতির ধরন (স্ট্যাটিক, রিলেটিভ, ফিক্সেড, অ্যাবসোলিউট বা স্টিকি) প্রয়োগ করা হয়।

position 属性

position এই বৈশিষ্ট্যটি ইউনিটের অবস্থানশীলতা নির্ধারণ করে যা প্রয়োগ করা হয়。

পাঁচটি ভিন্ন position মান রয়েছে:

  • static
  • relative
  • fixed
  • absolute
  • sticky

ইউনিটটি একইভাবে top, bottom, left এবং right বৈশিষ্ট্যগুলি দ্বারা অবস্থান নির্ধারণ করা হয়, কিন্তু যদি position বৈশিষ্ট্যটি পূর্বাভাস করা হয় না, তবে এই বৈশিষ্ট্যগুলি কাজ করবে না। ভিন্ন position মানের প্রতি এই বৈশিষ্ট্যগুলির কাজকর্মও ভিন্ন হয়。

position: static;

HTML ইউনিটটির ডিফল্ট অবস্থানশীলতা static (স্থায়ী)।

স্থায়ী অবস্থানের ইউনিটটি top, bottom, left এবং right বৈশিষ্ট্যগুলির প্রভাব থেকে মুক্ত রয়েছে。

position: static; ইউনিটটি কোনও বিশেষ পদ্ধতিতে অবস্থান নির্ধারণ করে না; তা সর্বদা পৃষ্ঠার সাধারণ প্রবাহ অনুযায়ী অবস্থান নির্ধারণ করে:

এই <div> ইউনিটটি position: static; নির্ধারণ করেছে:

এটা ব্যবহৃত CSS:

example

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Try it yourself

position: relative;

position: relative; ইউনিটটি তার স্বাভাবিক অবস্থানের প্রতি অবস্থান নির্ধারণ করে。

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

এই <div> ইউনিটটি position: relative; নির্ধারণ করেছে:

এটা ব্যবহৃত CSS:

example

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Try it yourself

position: fixed;

position: fixed; ইউনিটটি viewport-এর প্রতি অবস্থান নির্ধারণ করে, যার মানে যদি পৃষ্ঠা সরবরাহ করা হয়, তবুও তা একই স্থানে থাকবে। top, right, bottom এবং left বৈশিষ্ট্যগুলি এই ইউনিটকে অবস্থান নির্ধারণ করে।

স্থায়ী অবস্থানের ইউনিটটি পৃষ্ঠায় সাধারণত থাকা স্থানের স্থল ছাড়ে না。

পৃষ্ঠার ডান তলায় এই স্থায়ী ইউনিটটির দৃষ্টিগোচর করুন। এটা ব্যবহৃত CSS:

example

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Try it yourself

এই <div> ইউনিটটি position: fixed; নির্ধারণ করেছে:

position: absolute;

position: absolute; ইউনিটটি সবচেয়ে নিকটতম অবস্থানশীল পূর্বসূরী ইউনিটের প্রতি অবস্থান নির্ধারণ করে (না যদি fixed হয়, তবে viewport-এর প্রতি অবস্থান নির্ধারণ করে যেমন fixed)。

কিন্তু, যদি অবস্থানশীল ইউনিটটির কোনও পূর্বসূরী ইউনিট না থাকে, তবে তা ডকুমেন্টের মূল ইউনিট (body) ব্যবহার করবে এবং পৃষ্ঠাটির সাথে সরবরাহ করে যাবে。

Note:“অবস্থানশীল” ইউনিটটি তার অবস্থানটির সমস্ত ইউনিটগুলির সমূহ থেকে বৃত্তিভূমিকা পায়, static বাকি কোনও ইউনিট।

এটা একটি সহজ উদাহরণ:

এই <div> ইউনিটটি position: relative; নির্ধারণ করেছে:
এই <div> ইউনিটটি position: absolute; নির্ধারণ করেছে:

এটা ব্যবহৃত CSS:

example

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 
div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Try it yourself

position: sticky;

position: sticky; elements are positioned according to the user's scroll position.

Sticky elements are positioned relative to the scroll position (relative) and fixed (fixed) to switch between.

Note:Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires the -webkit- prefix (see the example below). You must also specify at least top,right,bottom or left one, so that sticky positioning works.

In this example, the sticky element will stay at the top of the page when it reaches its scroll position (top: 0)

example

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Try it yourself

Overlapping elements

When positioning elements, they can overlap with other elements.

z-index The attribute specifies the stacking order of the element (which element should be placed in front of or behind other elements).

Elements can be set to positive or negative stacking order:

This is a title

Since the z-index of the image is -1, it is behind the text.

example

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

Try it yourself

Elements with a higher stacking order are always in front of elements with a lower stacking order.

Note:If two positioned elements overlap and do not specify z-indexthen the last element in the HTML code will be displayed at the top.

position text in the image

How to place text on an image:

example

CodeW3C.com Logo
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Try it yourself:

Top Left Top Right Bottom Left Bottom Right Centered

more examples

set element shape
This example demonstrates how to set the shape of an element. The element is clipped to this shape and displayed.

all CSS positioning attributes

attribute description
bottom set bottom margin edge of positioning box.
clip 剪裁绝对定位的元素。
left 设置定位框的左侧外边距边缘。
position 规定元素的定位类型。
right 设置定位框的右侧外边距边缘。
top 设置定位框的顶部外边距边缘。
z-index 设置元素的堆叠顺序。

延伸阅读

课外书：CSS পোজিশনিং সারাংশ

课外书：CSS রিলেটিভ পোজিশনিং

课外书：CSS অবস্থায়ী পোজিশনিং