CSS position প্রক্রিয়া
- পূর্বপাশের পৃষ্ঠা pointer-events
- পরবর্তী পৃষ্ঠা @property
পরিভাষা ও ব্যবহার
position প্রতিভাগ এলাকার অবস্থান নির্ধারণ করে。
বিবরণ
এই প্রতিভাট উপাদান স্থাপন প্রক্রিয়াটি নির্দেশ করে। কোনও উপাদানকে স্থাপন করা যেতে পারে, কিন্তু সম্পূর্ণ বা স্থায়ী উপাদানটি যেমন উপাদানটির ধরন কী হোক না কেন একটি ব্লক বক্স তৈরি করবে। রিলেটিভ স্থাপন উপাদানটি স্বাভাবিক প্রবাহের প্রতি স্থাপন করা হবে。
অন্যান্য দেখুন:
CSS শিক্ষাক্রমCSS স্থাপন
HTML DOM সংক্ষিপ্ত বিশ্লেষণposition অ্যাট্রিবিউট
উদাহরণ
হোমের h2 উপাদান স্থাপন করা:
h2
{
position:absolute;
left:100px;
top:150px;
}
CSS সংজ্ঞা
position: static|absolute|fixed|relative|sticky|initial|inherit;
প্রতিভাট
| মান | বর্ণনা |
|---|---|
| absolute |
সম্পূর্ণ স্থাপন উপাদান স্থায়ী স্থাপনের বাইরে প্রথম পিতৃতত্ত্বকে স্থাপন করা হয়。 উপাদানের স্থান "left", "top", "right" এবং "bottom" অ্যাট্রিবিউটের মাধ্যমে নির্দিষ্ট করা হয়。 |
| fixed |
অবশ্যই, সম্পূর্ণ স্থাপন উপাদান ব্রাউজার উইন্ডোর প্রতি স্থাপন করা হয়。 উপাদানের স্থান "left", "top", "right" এবং "bottom" অ্যাট্রিবিউটের মাধ্যমে নির্দিষ্ট করা হয়。 |
| relative |
রিলেটিভ স্থাপন উপাদান তৈরি করে, স্বাভাবিক প্রবাহের প্রতি স্থাপন করা হয়。 তাই, "left:20"-এর মাধ্যমে উপাদানের LEFT স্থানে 20 পিক্সেল যোগ করা হবে。 |
| static | ডিফল্ট মান: কোনও স্থাপন না থাকলে, উপাদান স্বাভাবিক প্রবাহে দেখা যাবে (top, bottom, left, right বা z-index ঘোষণা নিষিদ্ধ) |
| inherit | পারিত হয়েছে যে পিতৃতত্ত্বকে পজিশন অ্যাট্রিবিউটের মান অনুসরণ করা উচিত |
প্রযুক্তিগত বিবরণ
| ডিফল্ট মান: | static |
|---|---|
| পৃথক সমর্থন: | no |
| সংস্করণ: | CSS2 |
| JavaScript সংজ্ঞা: | object.style.position="absolute" |
TIY উদাহরণ
- স্থাপন: স্থায়ী স্থাপন
- এই উদাহরণটি একটি উপাদানকে একটি উপাদানের স্বাভাবিক স্থানের প্রতি কিভাবে স্থাপন করা যায় দেখায়。
- স্থাপন: সম্পূর্ণ স্থাপন
- এই উদাহরণটি একটি উপাদানকে কিভাবে সম্পূর্ণ মানকের মানের মাধ্যমে স্থাপন করা যায় দেখায়。
- স্থাপন: স্থায়ী স্থাপন
- এই উদাহরণটি একটি উপাদানকে ব্রাউজার উইন্ডোর প্রতি কিভাবে স্থাপন করা যায় দেখায়。
- উপাদানের আকৃতি সেট করা
- এই উদাহরণটি একটি উপাদানের আকৃতি কিভাবে সেট করা যায় দেখায়। এই উপাদানটি এই আকৃতিতে কাটানো হয় এবং তা প্রদর্শিত হয়。
- Z-index
- Z-index-কে একটি উপাদানকে আরেকটি উপাদানের পরে স্থাপন করার জন্য ব্যবহার করা যেতে পারে。
- Z-index
- উপরোক্ত উদাহরণের উপাদানটির Z-index পরিবর্তিত হয়েছে。
ব্রাউজার সমর্থন
টেবিলের সংখ্যাগুলি প্রথম সম্পূর্ণভাবে এই প্রতিভাট সমর্থনকারী ব্রাউজারের সংস্করণকে নির্দেশ করে。
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
- পূর্বপাশের পৃষ্ঠা pointer-events
- পরবর্তী পৃষ্ঠা @property
