Articles
Wprowadzenie do CSS
Właściwości CSS związane z układem

Właściwości CSS związane z układem

Ten artykuł wyjaśnia właściwości CSS związane z układem.

Możesz nauczyć się korzystania oraz sposobu definiowania właściwości display i position.

YouTube Video

HTML do podglądu

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　配置・レイアウト ^}

Właściwość display

Właściwość display to właściwość CSS, która definiuje, jak element jest wyświetlany. Określa, w jakim formacie element jest renderowany, na przykład jako blok, inline, flex, grid lub ukryty.

Wartości właściwości display

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Określając block, element jest wyświetlany jako element blokowy.
  • Elementy blokowe są wyświetlane na nowej linii na stronie, przesuwając inne elementy do następnej linii.
  • Typowe elementy blokowe to <div>, <p>, <h1>, <section>, <article> itp.
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}
  • Określając inline, element jest wyświetlany jako element inline.
  • Elementy inline są wyświetlane w tej samej linii co sąsiadujące elementy i są wyrównane poziomo.
  • Typowe elementy inline to <span>, <a>, <strong> itp.
  • Elementy inline są umieszczane w tej samej linii co inne elementy inline i są wyświetlane ciągle poziomo, w przeciwieństwie do elementów blokowych.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Określając inline-block, element jest wyświetlany jako element inline, ale posiada także cechy elementu blokowego.
  • Elementy inline-block są wyświetlane w tej samej linii co inne elementy inline, ale można ustawić ich wysokość i szerokość jak w przypadku elementów blokowych.
  • Elementy <img>, <button> i <canvas> domyślnie zachowują się jak inline-block.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Określenie none powoduje, że element nie jest wyświetlany.
  • Element staje się całkowicie niewidoczny i jest wykluczony zarówno z ekranu, jak i z układu strony.
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}
  • Określenie flex powoduje, że element jest wyświetlany jako kontener flexbox.
  • Służy do elastycznego rozkładania i wyrównywania elementów potomnych (elementów flex).
  • Korzystanie z flexbox umożliwia wyświetlanie elementów potomnych w jednej linii, z automatycznym dostosowaniem marginesów i wyrównania.
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}
  • Określenie inline-flex wyświetla element jako elastyczny kontener w wierszu.
  • Mając cechy flexbox, jest traktowany jak element w wierszu i wyświetlany w tej samej linii co inne elementy.
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}
  • Określenie grid wyświetla element jako kontener siatki.
  • Układ siatki może być zastosowany do wyrównania elementów podrzędnych w wierszach i kolumnach.
  • Elementy podrzędne wewnątrz kontenera siatki są starannie rozmieszczone wzdłuż kolumn i wierszy.
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}
  • Określenie inline-grid wyświetla element jako kontener siatki w wierszu.
  • Używa systemu układu siatki i jest traktowany jako element w wierszu.
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}
  • Określenie table wyświetla element jako tabelę. Ma układ podobny do HTML <table>, a jego elementy podrzędne są traktowane jako komórki tabeli.
  • Jak w tym przykładzie, ustaw właściwość display elementów potomnych na table-row lub table-cell.
    • Gdy ustawione jest table-row, element zachowuje się jak wiersz tabeli (<tr>).
    • Gdy ustawione jest table-cell, element zachowuje się jak komórka tabeli (<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}
  • Określenie list-item wyświetla element jako element listy. Dotyczy elementów <li> zwykle używanych w <ul> lub <ol>.

Właściwość 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 to właściwość, która kontroluje sposób pozycjonowania elementów w CSS. Ta właściwość może być używana do pozycjonowania elementów względem ich rodzica, innych elementów lub ustalenia ich w stałym miejscu.

Wartości własności position

static 
1.static-element {
2    position: static;
3}
  • W klasie static-element właściwość position jest określona jako static. Element jest umieszczony w normalnym przepływie.
  • static to wartość domyślna. Jeśli position nie jest określone, stosowana jest wartość static.
  • Element jest pozycjonowany zgodnie z normalnym przepływem dokumentu. Własności top, right, bottom, left nie mogą być używane.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • W klasie relative-element właściwość position jest ustawiona na relative. Element przesuwa się względem swojej normalnej pozycji. W tym przykładzie jest umieszczony 10px w dół i 20px w prawo.
  • Określenie wartości relative ustawia element względem jego położenia pierwotnego. Element przemieszcza się z pierwotnego położenia na pozycję określoną przez własności top, right, bottom, left, zgodnie z normalnym przepływem dokumentu.
  • Element z ustawioną pozycją w trybie relative pozostawia miejsce w swojej pierwotnej pozycji, nawet po przemieszczeniu.
  • W tym przykładzie element przesuwa się o 10 pikseli w dół i 20 pikseli w prawo od swojej pierwotnej pozycji, ale przepływ dokumentu jest przetwarzany na podstawie pierwotnej pozycji.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • W klasie absolute-element właściwość position jest ustawiona na absolute. W tym przykładzie element jest przesunięty o 10 pikseli w dół i 20 pikseli w prawo od lewego górnego rogu swojego rodzica (lub viewportu).
  • Gdy ustawione jest absolute, element jest pozycjonowany absolutnie względem swojego rodzica. Jeśli position elementu nadrzędnego jest ustawione na relative, absolute lub fixed, element jest przesuwany względem tego rodzica za pomocą własności top, right, bottom, left. Jeśli nie zostanie znaleziony element nadrzędny, element jest pozycjonowany względem całej strony (viewportu).
  • Element z ustawioną pozycją w trybie absolute jest usuwany z normalnego przepływu dokumentu i nie wpływa na inne elementy.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • W klasie fixed-element właściwość position jest ustawiona na fixed. Określenie wartości fixed ustawia element w stałej pozycji. Element jest ustalony względem okna przeglądarki i nie przesuwa się podczas przewijania.
  • Na przykład jest używany, aby utrzymać nagłówek strony lub pasek nawigacyjny zawsze widoczny.
  • W tym przykładzie element jest przytwierdzony do prawego dolnego rogu ekranu i pozostaje tam nawet podczas przewijania strony.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • W klasie sticky-element wartość position jest ustawiona na sticky.
  • Kiedy określimy wartość sticky, element jest dynamicznie pozycjonowany w zależności od przewijania. Element podąża za normalnym przepływem dokumentu, ale gdy strona jest przewijana, element "zatrzymuje się" w określonej pozycji na podstawie zadanych wartości top, right, bottom i left.
  • sticky zachowuje się jak element przypięty w stałej pozycji w określonym zakresie.
  • W tym przykładzie element jest wyświetlany w swojej normalnej pozycji, ale gdy strona zostanie przewinięta do określonej pozycji top, element przykleja się do tej pozycji i podąża za przewijaniem.

Własności top, left, bottom, right

top, left, bottom i right to właściwości umożliwiające kontrolowanie pozycji elementów w CSS. Te właściwości są używane razem z właściwością position, aby określić, o ile przesunąć element w określonym kierunku względem jego pozycji.

Jednak te właściwości mają zastosowanie tylko wtedy, gdy position jest ustawione na relative, absolute, fixed lub sticky. Przy domyślnej wartości static te właściwości nie mają żadnego efektu.

Jak używać top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • Właściwość top określa, o ile element powinien być przesunięty od góry.
    • W tym przykładzie element przesuwa się w dół o 20px od swojej normalnej pozycji.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • Właściwość left określa, o ile element powinien być przesunięty od lewej strony.
    • W tym przykładzie element przesuwa się o 50px w prawo od lewej strony.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • Właściwość bottom określa, o ile element powinien być przesunięty od dołu.
    • W tym przykładzie element jest ustalony 10px nad dolną krawędzią ekranu. Pozostaje w tej pozycji nawet podczas przewijania.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • Właściwość right określa, o ile element powinien być przesunięty od prawej strony.
    • W tym przykładzie, podczas przewijania, element przesuwa się o 20px w lewo od prawej strony i zostaje ustalony w tej pozycji.

Zależność od właściwości position

  • relative: Przesuwa element o określone wartości top, left, bottom, right względem jego normalnej pozycji.
  • absolute: Przesuwa element do określonej pozycji top, left, bottom, right względem najbliższego przodka z ustawioną właściwością position jako relative, absolute lub fixed.
  • fixed: Ustawia element na określonej pozycji względem okna widoku (całego ekranu). Pozostaje w tej pozycji nawet podczas przewijania.
  • sticky: Element pozostaje w swojej normalnej pozycji do momentu, gdy podczas przewijania osiągnie określoną pozycję, w której to momencie "przykleja się" do niej.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video

Właściwości CSS związane z tabelamiWłaściwości CSS związane z flexboxem