Articles
مقدمة إلى CSS
خصائص 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 تحدد كيفية عرض العنصر۔ تحدد الشكل الذي يتم عرضه به العنصر، مثل block، inline، flex، grid، أو مخفي۔

قيم خاصية display

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • بتحديد block، يتم عرض العنصر كعنصر من نوع block-level۔
  • يتم عرض عناصر block على سطر جديد داخل الصفحة، مما يدفع العناصر الأخرى إلى السطر التالي۔
  • تشمل عناصر 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، يتم عرض العنصر كعنصر من نوع inline۔
  • يتم عرض عناصر inline على نفس السطر مع العناصر المجاورة ويتم محاذاتها أفقيًا۔
  • تشمل عناصر inline النموذجية <span>، <a>، <strong>، إلخ۔
  • توجد عناصر inline على نفس السطر مع العناصر الأخرى وتُعرض بشكل أفقي مستمر، على عكس عناصر block۔
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • تحديد inline-block يعرض العنصر كعنصر inline ولكنه يمتلك أيضًا خصائص عنصـر block۔
  • يتم عرض عناصر inline-block على نفس السطر مع عناصر 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 يعرض العنصر كحاوية flexbox۔
  • يُستخدم لترتيب ومحاذاة العناصر الفرعية (عناصر flex) بمرونة۔
  • استخدام flexbox يسمح بعرض العناصر الفرعية بشكل inline، حيث يتم ضبط الهوامش والمحاذاة تلقائيًا۔
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 يعرض العنصر كحاوية flexbox داخلية.۔
  • بينما يتميز بصفات flexbox، يُعامل كعنصر داخلي ويتم عرضه في نفس السطر مع العناصر الأخرى.۔
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.۔ يتحرك العنصر بالنسبة إلى موضعه الطبيعي.۔ في هذا المثال، تم وضعه 10 بكسل إلى الأسفل و20 بكسل إلى اليمين.۔
  • تعيين القيمة 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 له تتم إزالته من التدفق الطبيعي للمستند ولا يؤثر على العناصر الأخرى۔
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 تحدد مقدار إزاحة العنصر من الأعلى۔
    • في هذا المثال، يتحرك العنصر 20 بيكسل نحو الأسفل من موقعه العادي۔
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • خاصية left تحدد مقدار إزاحة العنصر من اليسار۔
    • في هذا المثال، يتحرك العنصر 50 بيكسل نحو اليمين من اليسار۔
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • خاصية bottom تحدد مقدار إزاحة العنصر من الأسفل۔
    • في هذا المثال، يتم تثبيت العنصر على بعد 10 بيكسل فوق أسفل الشاشة۔ يبقى العنصر عند هذا الموقع حتى أثناء التمرير۔
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • خاصية right تحدد مقدار إزاحة العنصر من اليمين۔
    • في هذا المثال، أثناء التمرير، يتحرك العنصر 20 بيكسل نحو اليسار من اليمين ويتم تثبيته في ذلك الموقع۔

العلاقة مع خاصية position

  • relative: ينقل العنصر بالقيم المحددة لـ top و left و bottom و right بالنسبة لموقعه العادي۔
  • absolute: ينقل العنصر إلى الموقع المحدد لـ top و left و bottom و right بالنسبة إلى أقرب عنصر أصلي تم تعيين خاصية position فيه إلى relative أو absolute أو fixed۔
  • fixed: يثبت العنصر في الموقع المحدد بالنسبة إلى نافذة العرض (الشاشة بأكملها)۔ يبقى العنصر عند هذا الموقع حتى أثناء التمرير۔
  • sticky: يبقى العنصر في موقعه العادي حتى يصل إلى موقع محدد أثناء التمرير، وعند هذه النقطة "يثبت" في ذلك الموقع۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بالجداولخصائص CSS المتعلقة بـ Flexbox