लेआउट-संबंधित CSS गुण

Articles

यह लेख लेआउट-संबंधित 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 निर्दिष्ट करने से तत्व को एक सूची आइटम के रूप में प्रदर्शित किया जाता है। इसे सामान्यतः <ul> या <ol> के भीतर उपयोग किए जाने वाले <li> तत्वों पर लागू किया जाता है।

`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 निर्दिष्ट करने से तत्व को सापेक्ष (relative) स्थिति में रखा जाता है। तत्व अपनी मूल स्थिति से top, right, bottom, left प्रॉपर्टी द्वारा निर्दिष्ट स्थिति तक जाता है, सामान्य दस्तावेज़ प्रवाह का पालन करते हुए।
सापेक्ष स्थिति (relative) पर सेट तत्व अपनी मूल स्थिति पर स्थान छोड़ देता है, भले ही वह स्थानांतरित हो।
इस उदाहरण में, तत्व अपनी मूल स्थिति से 10 पिक्सल नीचे और 20 पिक्सल दाईं ओर चलता है, लेकिन दस्तावेज़ प्रवाह मूल स्थिति के आधार पर संसाधित होता है।

`absolute`

1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}

absolute-element क्लास में, position को absolute पर सेट किया गया है। इस उदाहरण में, तत्व अपने पैरेंट (या व्यूपोर्ट) के टॉप-लेफ्ट कोने से 10 पिक्सल नीचे और 20 पिक्सल दाईं ओर प्रदर्शित होता है।
जब absolute निर्दिष्ट किया जाता है, तो तत्व अपने पैरेंट के सापेक्ष पूर्ण रूप से स्थित होता है। यदि पैरेंट तत्व का position relative, absolute या fixed पर सेट है, तो तत्व उस पैरेंट के आधार पर top, right, bottom, left प्रॉपर्टी का उपयोग करते हुए स्थानांतरित होता है। यदि कोई पैरेंट तत्व नहीं मिलता है, तो यह पूरे पृष्ठ (व्यूपोर्ट) के सापेक्ष स्थित होता है।
पूर्ण स्थिति (absolute positioning) पर सेट तत्व को सामान्य दस्तावेज़ प्रवाह से हटा दिया जाता है और यह अन्य तत्वों को प्रभावित नहीं करता है।

`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` प्रॉपर्टी

टॉप, लेफ्ट, बॉटम और राइट CSS में एलिमेंट की पोजीशन को नियंत्रित करने वाले प्रॉपर्टीज हैं। इन प्रॉपर्टीज का उपयोग पोजीशन प्रॉपर्टी के साथ किया जाता है, यह निर्धारित करने के लिए कि किसी एलिमेंट को उसकी स्थिति के सापेक्ष किसी निश्चित दिशा में कितना स्थानांतरित करना है।

हालांकि, ये प्रॉपर्टीज तभी लागू होती हैं जब पोजीशन को रिलेटिव, ऐब्सोल्यूट, फिक्स्ड या स्टिकी पर सेट किया गया हो। डिफ़ॉल्ट स्टैटिक वैल्यू में, इन प्रॉपर्टीज का कोई प्रभाव नहीं होता।

`टॉप`, `लेफ्ट`, `बॉटम` और `राइट` का उपयोग कैसे करें।

`top`

1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}

टॉप प्रॉपर्टी यह निर्धारित करती है कि किसी एलिमेंट को टॉप से कितनी दूरी पर सेट किया जाना चाहिए।
- इस उदाहरण में, एलिमेंट अपनी सामान्य स्थिति से 20px नीचे चला जाता है।

`left`

1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}

लेफ्ट प्रॉपर्टी यह निर्धारित करती है कि किसी एलिमेंट को लेफ्ट से कितनी दूरी पर सेट किया जाना चाहिए।
- इस उदाहरण में, एलिमेंट लेफ्ट से 50px राइट की ओर चला जाता है।

`bottom`

1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}

बॉटम प्रॉपर्टी यह निर्धारित करती है कि किसी एलिमेंट को बॉटम से कितनी दूरी पर सेट किया जाना चाहिए।
- इस उदाहरण में, एलिमेंट स्क्रीन के बॉटम से 10px ऊपर स्थिर हो जाता है। यह अपनी स्थिति पर स्थिर रहता है, भले ही स्क्रॉल किया जा रहा हो।

`right`

1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}

राइट प्रॉपर्टी यह निर्धारित करती है कि किसी एलिमेंट को राइट से कितनी दूरी पर सेट किया जाना चाहिए।
- इस उदाहरण में, स्क्रॉलिंग के दौरान, एलिमेंट राइट से 20px लेफ्ट की ओर जाता है और उस स्थिति पर स्थिर हो जाता है।

`पोजीशन` प्रॉपर्टी के साथ संबंध।

रिलेटिव: यह एलिमेंट को उसकी सामान्य स्थिति के सापेक्ष निर्दिष्ट टॉप, लेफ्ट, बॉटम, राइट मानों द्वारा स्थानांतरित करता है।
ऐब्सोल्यूट: यह एलिमेंट को निर्दिष्ट टॉप, लेफ्ट, बॉटम, राइट स्थान पर स्थानांतरित करता है, जो निकटतम पूर्वज की पोजीशन रिलेटिव, ऐब्सोल्यूट, या फिक्स्ड पर सेट होती है।
फिक्स्ड: यह एलिमेंट को व्यूपोर्ट (पूरी स्क्रीन) के सापेक्ष निर्दिष्ट स्थिति पर स्थिर करता है। यह अपनी स्थिति पर स्थिर रहता है, भले ही स्क्रॉल किया जा रहा हो।
स्टिकी: एलिमेंट अपनी सामान्य स्थिति में रहता है जब तक कि वह स्क्रॉलिंग के दौरान निर्दिष्ट स्थिति तक नहीं पहुंच जाता, और फिर उस स्थिति पर "चिपक" जाता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

टेबल-संबंधी CSS गुण फ्लेक्सबॉक्स-संबंधित CSS प्रॉपर्टीज़

लेआउट-संबंधित CSS गुण

YouTube Video

प्रीव्यू के लिए HTML

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

display गुण

display गुण के मान

block

inline

inline-block

none

flex

inline-flex

grid

inline-grid

table

list-item

position प्रॉपर्टी

position प्रॉपर्टी के मान

static

relative

absolute

fixed

sticky

top, left, bottom, right प्रॉपर्टी

टॉप, लेफ्ट, बॉटम और राइट का उपयोग कैसे करें।

top

left

bottom

right

पोजीशन प्रॉपर्टी के साथ संबंध।

YouTube Video

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

`display` गुण

`display` गुण के मान

`block`

`inline`

`inline-block`

`none`

`flex`

`inline-flex`

`grid`

`inline-grid`

`table`

`list-item`

`position` प्रॉपर्टी

`position` प्रॉपर्टी के मान

`static`

`relative`

`absolute`

`fixed`

`sticky`

`top`, `left`, `bottom`, `right` प्रॉपर्टी

`टॉप`, `लेफ्ट`, `बॉटम` और `राइट` का उपयोग कैसे करें।

`top`

`left`

`bottom`

`right`

`पोजीशन` प्रॉपर्टी के साथ संबंध।