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 או hidden.

ערכי תכונת 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 מציג את האלמנט כאלמנט ברמת שורה, אך הוא גם בעל מאפיינים של אלמנטים ברמת בלוק.
  • אלמנטים ברמת 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-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 מציג את האלמנט כמיכל פלקסבוקס מקוון (inline 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 מציג את האלמנט כמיכל סריג (grid container).
  • ניתן ליישם פריסת סריג כדי לסדר אלמנטים ילדים בשורות ובטורים.
  • אלמנטים ילדים במיכל הסריג מסודרים בצורה מסודרת לאורך טורים ושורות.
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 מציג את האלמנט כמיכל סריג מקוון (inline grid container).
  • הוא עושה שימוש במערכת פריסת סריג ונחשב כאובייקט מקוון.
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 מציג את האלמנט כטבלה. יש לו פריסה הדומה ל-<table> ב-HTML, והאלמנטים הילדים שלו נחשבים לתאי טבלה.
  • כפי שמוצג בדוגמה זו, יש להגדיר את המאפיין 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, תוך שהוא פועל לפי זרימת המסמך הרגילה.
  • אלמנט עם מיקום יחסי () משאיר מקום במיקומו המקורי גם לאחר שהוא זז.
  • בדוגמה זו, האלמנט נע 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. אם לא נמצא אלמנט אב, הוא ימוקם ביחס כלל העמוד (viewport).
  • אלמנט עם מיקום מוחלט () מוצא מזרימת המסמך הרגילה ואינו משפיע על האלמנטים האחרים.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • במחלקת fixed-element, התכונה position מוגדרת כ-fixed. הגדרת fixed ממקמת אלמנט במקום קבוע. האלמנט מקובע לתצוגה (viewport) ולא זז כאשר גוללים.
  • לדוגמה, זה משמש לשמירה על כותרת עמוד או סרגל ניווט גלויים תמיד.
  • בדוגמה זו, האלמנט מקובע לפינה הימנית התחתונה של המסך ונשאר שם גם כאשר הגלילה מתבצעת בדף.
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: מזיז את האלמנט למיקום שצויין ב-top, left, bottom, right ביחס לאב הקרוב ביותר שבו המאפיין position מוגדר כ-relative, absolute או fixed.
  • fixed: מקבע את האלמנט במיקום שצויין ביחס ל-viewport (כל המסך). הוא נשאר באותו מיקום גם כאשר גוללים.
  • sticky: האלמנט נשאר במצבו הרגיל עד שהוא מגיע למיקום שצויין במהלך גלילה, ואז הוא "נדבק" באותו מיקום.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות CSS הקשורות לטבלאותתכונות CSS הקשורות ל-Flexbox