Articles
সিএসএস-এর পরিচিতি
লেআউট-সম্পর্কিত CSS প্রোপার্টিস

লেআউট-সম্পর্কিত CSS প্রোপার্টিস

এই নিবন্ধটি লেআউট-সম্পর্কিত CSS প্রোপার্টিস ব্যাখ্যা করে।

আপনি display এবং position প্রোপার্টিসের ব্যবহার এবং কীভাবে এটি লিখবেন তা শিখতে পারবেন।

YouTube Video

প্রিভিউর জন্য HTML

css-layout.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-layout.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>display: block</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.block-element {
 27    display: block;
 28    width: 400px;
 29    background-color: lightblue;
 30    padding: 10px;
 31    margin-bottom: 10px;
 32}
 33</pre>
 34                <header><h4>HTML</h4></header>
 35                <pre>&lt;div class="block-element"&gt;This is a block element.&lt;/div&gt;</pre>
 36                <header><h4>HTML+CSS</h4></header>
 37                <section class="sample-view">
 38                    <div class="block-element">This is a block element.</div>
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>display: inline</h3>
 44            <section>
 45                <header><h4>CSS</h4></header>
 46<pre class="sample">
 47span.inline-element {
 48    background-color: lightgray;
 49    padding: 10px;
 50}
 51
 52div.inline-element {
 53    display: inline;
 54    background-color: lightblue;
 55    padding: 10px;
 56}
 57</pre>
 58                <header><h4>HTML</h4></header>
 59<pre>
 60&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
 61&lt;div class="inline-element"&gt;div tag with "display: inline"&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <span class="inline-element">This is an inline element.</span>
 66                    <div class="inline-element">div tag with "display: inline"</div>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>display: inline-block</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.inline-block-element {
 76    display: inline-block;
 77    width: 200px;
 78    background-color: lightblue;
 79    padding: 10px;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
 85&lt;div class="inline-block-element"&gt;This is an inline-block element.&lt;/div&gt;
 86&lt;span class="inline-element"&gt;Another inline element.&lt;/span&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <span class="inline-element">This is an inline element.</span>
 91                    <div class="inline-block-element">This is an inline-block element.</div>
 92                    <span class="inline-element">Another inline element.</span>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>display: none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101div.none-element {
102    display: none;
103    background-color: lightblue;
104    padding: 10px;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108                <pre>&lt;div class="none-element"&gt;This is a none element.&lt;/div&gt;</pre>
109                <header><h4>HTML+CSS</h4></header>
110                <section class="sample-view">
111                    <div class="none-element">This is a none element.</div>
112                </section>
113            </section>
114        </article>
115        <article>
116            <h3>display: flex</h3>
117            <section>
118                <header><h4>CSS</h4></header>
119<pre class="sample">
120.flex-container {
121    display: flex;
122    justify-content: space-between;
123    background-color: lightgray;
124    padding: 10px;
125}
126
127.flex-container div {
128    width: 120px;
129    background-color: lightblue;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class="flex-container"&gt;
135    &lt;div&gt;Item 1&lt;/div&gt;
136    &lt;div&gt;Item 2&lt;/div&gt;
137&lt;/div&gt;
138</pre>
139                <header><h4>HTML+CSS</h4></header>
140                <section class="sample-view">
141                    <div class="flex-container">
142                        <div>Flex item 1</div>
143                        <div>Flex item 2</div>
144                    </div>
145                </section>
146            </section>
147        </article>
148        <article>
149            <h3>display: inline-flex</h3>
150            <section>
151                <header><h4>CSS</h4></header>
152<pre class="sample">
153.inline-flex-container {
154    display: inline-flex;
155    width: 250px;
156    justify-content: space-between;
157    background-color: lightgray;
158    padding: 10px;
159}
160
161.inline-flex-container div {
162    width: 100px;
163    background-color: lightblue;
164}
165</pre>
166                <header><h4>HTML</h4></header>
167<pre>
168&lt;span class="inline-element"&gt;Inline element&lt;/span&gt;
169&lt;div class="inline-flex-container"&gt;
170    &lt;div&gt;Inline Flex item 1&lt;/div&gt;
171    &lt;div&gt;Inline Flex item 2&lt;/div&gt;
172&lt;/div&gt;
173</pre>
174                <header><h4>HTML+CSS</h4></header>
175                <section class="sample-view">
176                    <span class="inline-element">Inline element</span>
177                    <div class="inline-flex-container">
178                        <div>Inline Flex item 1</div>
179                        <div>Inline Flex item 2</div>
180                    </div>
181                </section>
182            </section>
183        </article>
184        <article>
185            <h3>display: grid</h3>
186            <section>
187                <header><h4>CSS</h4></header>
188<pre class="sample">
189.grid-container {
190    display: grid;
191    grid-template-columns: repeat(2, 1fr);
192    gap: 10px;
193    background-color: #f3f3f3;
194    padding: 10px;
195    height: 200px;
196}
197.grid-container div {
198    background-color: lightblue;
199    border: 1px solid #aaa;
200    padding: 5px;
201    text-align: center;
202    width: 100px;
203}
204</pre>
205                <header><h4>HTML</h4></header>
206<pre>
207&lt;div class="grid-container"&gt;
208    &lt;div&gt;Item 1&lt;/div&gt;
209    &lt;div&gt;Item 2&lt;/div&gt;
210    &lt;div&gt;Item 3&lt;/div&gt;
211    &lt;div&gt;Item 4&lt;/div&gt;
212&lt;/div&gt;
213</pre>
214                <header><h4>HTML+CSS</h4></header>
215                <section class="sample-view">
216                    <div class="grid-container">
217                        <div>Item 1</div>
218                        <div>Item 2</div>
219                        <div>Item 3</div>
220                        <div>Item 4</div>
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>display: inline-grid</h3>
227            <section>
228                <header><h4>CSS</h4></header>
229<pre class="sample">
230.inline-grid-element {
231    display: inline-grid;
232    grid-template-columns: 1fr 1fr;
233    gap: 5px;
234    background-color: lightblue;
235    padding: 5px;
236    width: 200px;
237    height: 150px;
238}
239.inline-grid-element div {
240    background-color: lightskyblue;
241    padding: 5px;
242    text-align: center;
243    border: 1px solid #ccc;
244    width: 80px;
245    height: 25px;
246}
247</pre>
248                <header><h4>HTML</h4></header>
249<pre>
250&lt;span class="inline-element"&gt;This is an inline element.&lt;/span&gt;
251&lt;div class="inline-grid-element"&gt;
252    &lt;div&gt;Item 1&lt;/div&gt;
253    &lt;div&gt;Item 2&lt;/div&gt;
254    &lt;div&gt;Item 3&lt;/div&gt;
255    &lt;div&gt;Item 4&lt;/div&gt;
256&lt;/div&gt;
257&lt;span class="inline-element"&gt;Another inline element.&lt;/span&gt;
258</pre>
259                <header><h4>HTML+CSS</h4></header>
260                <section class="sample-view">
261                    <span class="inline-element">This is an inline element.</span>
262                    <div class="inline-grid-element">
263                        <div>Item 1</div>
264                        <div>Item 2</div>
265                        <div>Item 3</div>
266                        <div>Item 4</div>
267                    </div>
268                    <span class="inline-element">Another inline element.</span>
269                </section>
270            </section>
271        </article>
272        <article>
273            <h3>display: table</h3>
274            <section>
275                <header><h4>CSS</h4></header>
276<pre class="sample">
277.table-container {
278    display: table;
279    border-collapse: collapse;
280    width: 100%;
281    height: 100%;
282}
283
284.table-row {
285    display: table-row;
286}
287
288.table-cell {
289    display: table-cell;
290    border: 1px solid #999;
291    padding: 8px;
292    text-align: center;
293    vertical-align: middle;
294    background-color: lightblue;
295}
296
297.header-row .table-cell {
298    font-weight: bold;
299    background-color: lightskyblue;
300}
301</pre>
302                <header><h4>HTML</h4></header>
303<pre>
304&lt;section&gt;
305    &lt;div class="table-container"&gt;
306        &lt;div class="table-row header-row"&gt;
307            &lt;div class="table-cell"&gt;Header 1&lt;/div&gt;
308            &lt;div class="table-cell"&gt;Header 2&lt;/div&gt;
309        &lt;/div&gt;
310        &lt;div class="table-row"&gt;
311            &lt;div class="table-cell"&gt;Row 1, Cell 1&lt;/div&gt;
312            &lt;div class="table-cell"&gt;Row 1, Cell 2&lt;/div&gt;
313        &lt;/div&gt;
314        &lt;div class="table-row"&gt;
315            &lt;div class="table-cell"&gt;Row 2, Cell 1&lt;/div&gt;
316            &lt;div class="table-cell"&gt;Row 2, Cell 2&lt;/div&gt;
317        &lt;/div&gt;
318    &lt;/div&gt;
319&lt;/section&gt;
320</pre>
321                <header><h4>HTML+CSS</h4></header>
322                <section class="sample-view">
323                    <div class="table-container">
324                        <div class="table-row header-row">
325                            <div class="table-cell">Header 1</div>
326                            <div class="table-cell">Header 2</div>
327                        </div>
328                        <div class="table-row">
329                            <div class="table-cell">Row 1, Cell 1</div>
330                            <div class="table-cell">Row 1, Cell 2</div>
331                        </div>
332                        <div class="table-row">
333                            <div class="table-cell">Row 2, Cell 1</div>
334                            <div class="table-cell">Row 2, Cell 2</div>
335                        </div>
336                    </div>
337                </section>
338            </section>
339        </article>
340        <article>
341            <h3>display: list-item</h3>
342            <section>
343                <header><h4>CSS</h4></header>
344<pre class="sample">
345.list-item-element {
346    display: list-item;
347    list-style-position: inside;
348    list-style-type: disc;
349    margin-left: 20px;
350    background-color: lightblue;
351    padding: 10px;
352    height: min-content;
353}
354</pre>
355                <header><h4>HTML</h4></header>
356<pre>
357&lt;div class="list-item-element"&gt;This is a list item element.&lt;/div&gt;
358&lt;div class="list-item-element"&gt;Another list item element.&lt;/div&gt;
359&lt;div class="list-item-element"&gt;Yet another list item element.&lt;/div&gt;
360</pre>
361                <header><h4>HTML+CSS</h4></header>
362                <section class="sample-view">
363                    <div class="list-item-element">This is a list item element.</div>
364                    <div class="list-item-element">Another list item element.</div>
365                    <div class="list-item-element">Yet another list item element.</div>
366                </section>
367            </section>
368        </article>
369        <article>
370            <h3>position</h3>
371            <section style="height: auto;">
372                <header><h4>position: static</h4></header>
373                <section class="sample-view">
374                    <div class="static-element">This is a static element.</div>
375                </section>
376                <header><h4>position: relative; top: 10px; left: 20px;</h4></header>
377                <section class="sample-view">
378                    <div class="relative-element">This is a relative element.</div>
379                </section>
380                <header><h4>position: absolute; top: 10px; left: 20px;</h4></header>
381                <section class="sample-view">
382                    <div class="absolute-container">
383                        <div class="absolute-element">This is an absolute element.</div>
384                    </div>
385                </section>
386                <header><h4>position: fixed; bottom: 10px; right: 10px;</h4></header>
387                <section class="sample-view">
388                    <div class="fixed-element">This is a fixed element.</div>
389                </section>
390                <header><h4>position: sticky; top: 0;</h4></header>
391                <section class="sample-view">
392                    <div class="sticky-container">
393                        <div style="width: 20px; height: 400px; background: linear-gradient(to top, red, blue);"></div>
394                        <div class="sticky-element">This is a sticky element. Scroll down!</div>
395                    </div>
396                </section>
397            </section>
398        </article>
399    </main>
400</body>
401</html>

{^ i18n　配置・レイアウト ^}

display প্রোপার্টি

display প্রোপার্টিটি একটি CSS প্রোপার্টি, যা নির্ধারণ করে উপাদানটি কীভাবে প্রদর্শিত হবে। এটি নির্ধারণ করে উপাদানটি কী ফরম্যাটে রেন্ডার হবে, যেমন ব্লক, ইনলাইন, ফ্লেক্স, গ্রিড বা হিডেন।

display প্রোপার্টির মান

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • block উল্লেখ করে, উপাদানটি ব্লক-লেভেল হিসাবে প্রদর্শিত হয়।
  • ব্লক উপাদানগুলি পাতার ভিতরে একটি নতুন লাইনে প্রদর্শিত হয় এবং অন্যান্য উপাদানগুলি পরবর্তী লাইনে সরিয়ে দেয়।
  • সাধারণ ব্লক উপাদানগুলির মধ্যে <div>, <p>, <h1>, <section>, <article> ইত্যাদি অন্তর্ভুক্ত।
inline 
 1span.inline-element {
 2    background-color: lightgray;
 3    padding: 10px;
 4}
 5
 6div.inline-element {
 7    display: inline;
 8    background-color: lightblue;
 9    padding: 10px;
10}
  • inline উল্লেখ করে, উপাদানটি ইনলাইন উপাদান হিসাবে প্রদর্শিত হয়।
  • ইনলাইন উপাদানগুলি পাশের উপাদানগুলির সাথে একই লাইনে প্রদর্শিত হয় এবং অনুভূমিকভাবে সাজানো হয়।
  • সাধারণ ইনলাইন উপাদানগুলির মধ্যে <span>, <a>, <strong> ইত্যাদি অন্তর্ভুক্ত।
  • ইনলাইন উপাদানগুলি অন্য ইনলাইন উপাদানগুলির সাথে একই লাইনে স্থাপন করা হয় এবং ব্লক উপাদানগুলির মতো নয়, অনুভূমিকভাবে ধারাবাহিকভাবে প্রদর্শিত হয়।
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • inline-block উল্লেখ করে, উপাদানটি ইনলাইন হিসাবে প্রদর্শিত হয়, কিন্তু এতে ব্লক উপাদানের বৈশিষ্ট্যও থাকে।
  • ইনলাইন-ব্লক উপাদানগুলি অন্য ইনলাইন উপাদানগুলির সাথে একই লাইনে প্রদর্শিত হয়, তবে আপনি ব্লক উপাদানগুলির মতো উচ্চতা এবং প্রস্থ নির্ধারণ করতে পারেন।
  • <img>, <button>, এবং <canvas> উপাদান ডিফল্টরূপে inline-block এর মতো আচরণ করে।
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • none উল্লেখ করলে উপাদানটি প্রদর্শিত হয় না।
  • উপাদানটি সম্পূর্ণ অদৃশ্য হয়ে যায় এবং এটি স্ক্রিন ও লেআউট উভয় থেকেই বাদ পড়ে।
flex 
 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    background-color: lightgray;
 5    padding: 10px;
 6}
 7
 8.flex-container div {
 9    width: 120px;
10    background-color: lightblue;
11}
  • flex উল্লেখ করে, উপাদানটি একটি ফ্লেক্সবক্স কন্টেইনার হিসাবে প্রদর্শিত হয়।
  • এটি ফ্লেক্স আইটেমস (চাইল্ড উপাদানগুলি) নমনীয়ভাবে সাজানো ও সাজানোর জন্য ব্যবহৃত হয়।
  • ফ্লেক্সবক্স ব্যবহার করলে চাইল্ড উপাদানগুলি ইনলাইন প্রদর্শিত হয় এবং মার্জিন ও সাজানো স্বয়ংক্রিয়ভাবে সামঞ্জস্য করা হয়।
inline-flex 
 1.inline-flex-container {
 2    display: inline-flex;
 3    width: 250px;
 4    justify-content: space-between;
 5    background-color: lightgray;
 6    padding: 10px;
 7}
 8
 9.inline-flex-container div {
10    width: 100px;
11    background-color: lightblue;
12}
  • inline-flex নির্ধারণ করলে উপাদানটি একটি ইনলাইন ফ্লেক্সবক্স কন্টেনার হিসাবে প্রদর্শিত হয়।
  • ফ্লেক্সবক্সের বৈশিষ্ট্যগুলি ধরে রেখে, এটি একটি ইনলাইন উপাদান হিসাবে বিবেচিত হয় এবং অন্যান্য উপাদানের সাথে একই লাইনে প্রদর্শিত হয়।
grid 
 1.grid-container {
 2    display: grid;
 3    grid-template-columns: repeat(2, 1fr);
 4    gap: 10px;
 5    background-color: #f3f3f3;
 6    padding: 10px;
 7    height: 200px;
 8}
 9
10.grid-container div {
11    background-color: lightblue;
12    border: 1px solid #aaa;
13    padding: 5px;
14    text-align: center;
15    width: 100px;
16}
  • grid নির্দিষ্ট করলে উপাদানটি একটি গ্রিড কন্টেনার হিসাবে প্রদর্শিত হয়।
  • গ্রিড লেআউটের মাধ্যমে সন্তানের উপাদানগুলিকে সারি এবং কলামে সাজানো যেতে পারে।
  • গ্রিড কন্টেনারের ভিতরের সন্তানের উপাদানগুলি কলাম এবং সারি বরাবর সুন্দরভাবে সাজানো থাকে।
inline-grid 
 1.inline-grid-element {
 2    display: inline-grid;
 3    grid-template-columns: 1fr 1fr;
 4    gap: 5px;
 5    background-color: lightblue;
 6    padding: 5px;
 7    width: 200px;
 8    height: 150px;
 9}
10.inline-grid-element div {
11    background-color: lightskyblue;
12    padding: 5px;
13    text-align: center;
14    border: 1px solid #ccc;
15    width: 80px;
16    height: 25px;
17}
  • inline-grid নির্ধারণ করলে উপাদানটি একটি ইনলাইন গ্রিড কন্টেনার হিসাবে প্রদর্শিত হয়।
  • এটি গ্রিড লেআউট সিস্টেম ব্যবহার করে এবং একটি ইনলাইন উপাদান হিসাবে বিবেচিত হয়।
table 
 1.table-container {
 2    display: table;
 3    border-collapse: collapse;
 4    width: 100%;
 5    height: 100%;
 6}
 7
 8.table-row {
 9    display: table-row;
10}
11
12.table-cell {
13    display: table-cell;
14    border: 1px solid #999;
15    padding: 8px;
16    text-align: center;
17    vertical-align: middle;
18    background-color: lightblue;
19}
20
21.header-row .table-cell {
22    font-weight: bold;
23    background-color: lightskyblue;
24}
  • table নির্ধারণ করলে উপাদানটি একটি টেবিল হিসাবে প্রদর্শিত হয়। এটির লেআউট HTML <table>-এর মতো এবং এটির সন্তানের উপাদানগুলি টেবিল সেল হিসাবে বিবেচনা করা হয়।
  • এই উদাহরণের মতো, শিশু উপাদানগুলির display প্রপার্টি table-row বা table-cell এ সেট করুন।
    • table-row নির্ধারণ করা হলে, উপাদানটি একটি টেবিল রো (<tr>) এর মতো আচরণ করে।
    • table-cell নির্ধারণ করা হলে, উপাদানটি একটি টেবিল সেল (<td>) এর মতো আচরণ করে।
list-item 
1.list-item-element {
2    display: list-item;
3    list-style-position: inside;
4    list-style-type: disc;
5    margin-left: 20px;
6    background-color: lightblue;
7    padding: 10px;
8    height: min-content;
9}
  • list-item নির্ধারণ করলে উপাদানটি একটি তালিকার আইটেম হিসাবে প্রদর্শিত হয়। এটি <li> উপাদানগুলির জন্য প্রয়োগ করা হয়, যা সাধারণত <ul> বা <ol> এর ভিতরে ব্যবহৃত হয়।

position প্রোপার্টি 

 1.static-element {
 2    position: static;
 3    background-color: lightblue;
 4    padding: 10px;
 5    margin-bottom: 20px;
 6}
 7
 8.relative-element {
 9    position: relative;
10    background-color: lightblue;
11    top: 10px;
12    left: 20px;
13    padding: 10px;
14    margin-bottom: 20px;
15}
16
17.absolute-container {
18    position: relative;
19    width: 500px;
20    height: 150px;
21    background-color: lightgray;
22    margin-bottom: 20px;
23}
24
25.absolute-element {
26    position: absolute;
27    top: 10px;
28    left: 20px;
29    background-color: lightblue;
30    padding: 10px;
31}
32
33.fixed-element {
34    position: fixed;
35    bottom: 10px;
36    right: 10px;
37    background-color: lightblue;
38    padding: 10px;
39}
40
41.sticky-container {
42    overflow: scroll;
43    height: 150px;
44    width: 500px;
45}
46
47.sticky-element {
48    position: sticky;
49    top: 0;
50    background-color: lightblue;
51    padding: 10px;
52}

position একটি প্রোপার্টি যা CSS-এ উপাদানগুলির অবস্থান নির্ধারণ করে। এই প্রোপার্টি ব্যবহার করে উপাদানগুলিকে তাদের পেরেন্ট বা অন্যান্য উপাদানের তুলনায় আপেক্ষিক বা নিরীক্ষিতভাবে স্থাপন করা যায়, অথবা নির্দিষ্ট স্থানে স্থির করা যায়।

position প্রপার্টির মানগুলি

static 
1.static-element {
2    position: static;
3}
  • static-element ক্লাসে, position-কে static হিসাবে নির্ধারণ করা হয়েছে। উপাদানটি স্বাভাবিক প্রবাহে অবস্থান করে।
  • static হল ডিফল্ট মান। যদি position নির্দিষ্ট না করা হয়, তবে static প্রয়োগ করা হয়।
  • উপাদানটি স্বাভাবিক ডকুমেন্ট প্রবাহ অনুযায়ী অবস্থান করে। top, right, bottom, left প্রপার্টিগুলি ব্যবহার করা যাবে না।
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • relative-element ক্লাসে, position-কে relative হিসাবে নির্ধারণ করা হয়েছে। উপাদানটি তার স্বাভাবিক অবস্থানের তুলনায় সরানো হয়। এই উদাহরণে, এটি 10px নিচে এবং 20px ডান দিকে অবস্থান করা হয়েছে।
  • relative নির্ধারণ করলে উপাদানটি আপেক্ষিক অবস্থানে চলে যায়। উপাদানটি তার মূল অবস্থান থেকে top, right, bottom, left প্রপার্টিগুলি দ্বারা নির্ধারিত অবস্থানে চলে যায়, স্বাভাবিক ডকুমেন্ট প্রবাহ অনুসরণ করে।
  • একটি উপাদান যেটি আপেক্ষিক অবস্থান দেয়া হয়েছে, সেটি স্থানান্তরের পরেও তার মূল অবস্থানে জায়গা রেখে যায়।
  • এই উদাহরণে, উপাদানটি তার মূল অবস্থান থেকে 10 পিক্সেল নীচে এবং 20 পিক্সেল ডানদিকে সরে যায়, কিন্তু ডকুমেন্ট প্রবাহ মূল অবস্থানের উপর ভিত্তি করে প্রক্রিয়াজাত হয়।
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • absolute-element ক্লাসে, position-কে absolute হিসাবে নির্ধারণ করা হয়েছে। এই উদাহরণে, উপাদানটি এর প্যারেন্টের (অথবা ভিউপোর্টের) উপরে-বাম কোণ থেকে ১০ পিক্সেল নিচে এবং ২০ পিক্সেল ডানদিকে স্থাপন করা হয়েছে।
  • absolute নির্ধারণ করা হলে, উপাদানটি এর প্যারেন্টের সাথে তুলনামূলকভাবে সম্পূর্ণ নির্দিষ্টভাবে স্থাপন হয়। যদি প্যারেন্ট উপাদানের position relative, absolute, বা fixed হিসাবে সেট করা থাকে, তবে উপাদানটি প্যারেন্টের উপর ভিত্তি করে top, right, bottom, left প্রপার্টি ব্যবহার করে সরবে। যদি কোন প্যারেন্ট উপাদান পাওয়া না যায়, তবে এটি সম্পূর্ণ পৃষ্ঠা (viewport)-এর সাথে আপেক্ষিক অবস্থানে থাকে।
  • যে উপাদানটি absolute অবস্থানে সেট করা আছে, সেটি স্বাভাবিক ডকুমেন্ট প্রবাহ থেকে সরানো হয় এবং অন্য উপাদানগুলিকে প্রভাবিত করে না।
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • fixed-element ক্লাসে, position-কে fixed হিসাবে নির্ধারণ করা হয়েছে। fixed নির্ধারণ করলে উপাদানটি একটি নির্দিষ্ট স্থানে অবস্থান করে। উপাদানটি ভিউপোর্টে স্থির হয় এবং স্ক্রল করার সময় সরানো যায় না।
  • উদাহরণস্বরূপ, এটি একটি পৃষ্ঠা হেডার বা নেভিগেশন বার সবসময় দৃশ্যমান রাখতে ব্যবহৃত হয়।
  • এই উদাহরণে, উপাদানটি স্ক্রিনের নিচের ডান কোণে স্থির রয়েছে এবং এটি এমনকি যখন পৃষ্ঠা স্ক্রল করা হয় তাতেও সেখানেই থাকে।
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • sticky-element শ্রেণীতে, position বিকল্পটি sticky হিসাবে সেট করা হয়েছে।
  • sticky নির্ধারণ করলে উপাদানটি স্ক্রলিং অনুসারে গতিশীলভাবে অবস্থান করে। এটি স্বাভাবিক ডকুমেন্ট প্রবাহ অনুসরণ করে, কিন্তু যখন পৃষ্ঠা স্ক্রল করা হয়, উপাদানটি নির্দিষ্ট top, right, bottom, এবং left মানের উপর ভিত্তি করে একটি নির্দিষ্ট অবস্থানে "আটকে" যায়।
  • sticky একটি নির্দিষ্ট সীমার মধ্যে স্থির উপাদানের মতো আচরণ করে।
  • এই উদাহরণে, উপাদানটি স্বাভাবিক অবস্থানে প্রদর্শিত হয়, তবে পৃষ্ঠা নির্দিষ্ট top অবস্থানে স্ক্রল করা হলে এটি সেই অবস্থানে আটকে যায় এবং স্ক্রল অনুসরণ করে।

top, left, bottom, right প্রপার্টিগুলি

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

তবে, এই বৈশিষ্ট্যগুলি শুধুমাত্র প্রযোজ্য হয় যখন position বৈশিষ্ট্যটি relative, absolute, fixed, বা sticky-তে সেট করা হয়। ডিফল্ট static মানে, এই বৈশিষ্ট্যগুলির কোনো প্রভাব নেই।

top, left, bottom, right কিভাবে ব্যবহার করবেন

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • top বৈশিষ্ট্যটি উপরে থেকে উপাদানটি কত দূরে থাকা উচিত তা নির্ধারণ করে।
    • এই উদাহরণে, উপাদানটি এর স্বাভাবিক অবস্থান থেকে 20px নিচে যাচ্ছে।
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • left বৈশিষ্ট্যটি বাম দিক থেকে উপাদানটি কত দূরে থাকা উচিত তা নির্ধারণ করে।
    • এই উদাহরণে, উপাদানটি বাম দিক থেকে 50px ডানদিকে সরানো হয়েছে।
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • bottom বৈশিষ্ট্যটি নিচ থেকে উপাদানটি কত দূরে থাকা উচিত তা নির্ধারণ করে।
    • এই উদাহরণে, উপাদানটি স্ক্রিনের নিচ থেকে 10px উপরে স্থির থাকে। এটি স্ক্রল করার সময়ও সেই অবস্থানে থাকে।
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • right বৈশিষ্ট্যটি ডান দিক থেকে উপাদানটি কত দূরে থাকা উচিত তা নির্ধারণ করে।
    • এই উদাহরণে, স্ক্রল করার সময় উপাদানটি ডান দিক থেকে 20px বামে চলে যায় এবং সেই অবস্থানে স্থির থাকে।

position বৈশিষ্ট্যের সাথে সম্পর্ক।

  • relative: উপাদানটি এর স্বাভাবিক অবস্থানের সাথে সম্পর্কিত top, left, bottom, right দ্বারা নির্ধারিত মান অনুযায়ী সরানো হয়।
  • absolute: উপাদানটি সবচেয়ে কাছের পূর্বপুরুষ যার position relative, absolute, বা fixed-এ সেট করা তার সাথে সম্পর্কিত নির্ধারিত top, left, bottom, right অবস্থানে সরানো হয়।
  • fixed: উপাদানটি ভিউপোর্ট (সমস্ত স্ক্রিন) এর সাথে সম্পর্কিত নির্ধারিত অবস্থানে স্থির করে। এটি স্ক্রল করার সময়ও সেই অবস্থানে থাকে।
  • sticky: উপাদানটি স্ক্রল করার সময় নির্ধারিত অবস্থানে পৌঁছানো পর্যন্ত স্বাভাবিক অবস্থানে থাকে, এবং পরে সেই অবস্থানে "স্থির" হয়ে যায়।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

টেবিল সম্পর্কিত CSS প্রপার্টিজফ্লেক্সবক্স সম্পর্কিত সিএসএস প্রপার্টিজ