Articles
Introduksjon til CSS
CSS-egenskaper relatert til oppsett

CSS-egenskaper relatert til oppsett

Denne artikkelen forklarer CSS-egenskaper relatert til oppsett.

Du kan lære om bruken av og hvordan du skriver display- og position-egenskapene.

YouTube Video

HTML for Forhåndsvisning

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-egenskapen

display-egenskapen er en CSS-egenskap som definerer hvordan elementet vises. Den bestemmer i hvilket format elementet rendres, som block, inline, flex, grid eller skjult.

display-egenskapens verdier

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Ved å spesifisere block vises elementet som et blokknivåelement.
  • Blokkelementer vises på en ny linje på siden, og flytter andre elementer til neste linje.
  • Typiske blokkelementer inkluderer <div>, <p>, <h1>, <section>, <article>, osv.
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}
  • Ved å spesifisere inline vises elementet som et inline-element.
  • Inline-elementer vises på samme linje som naboelementer og er justert horisontalt.
  • Typiske inline-elementer inkluderer <span>, <a>, <strong>, osv.
  • Inline-elementer plasseres på samme linje som andre inline-elementer og vises kontinuerlig horisontalt, i motsetning til blokkelementer.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Når inline-block spesifiseres, vises elementet som et inline-element, men det har også blokkelementegenskaper.
  • Inline-block-elementer vises på samme linje som andre inline-elementer, men du kan sette høyde og bredde som med blokkelementer.
  • <img>, <button> og <canvas>-elementer oppfører seg som inline-block som standard.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Ved å spesifisere none vises ikke elementet.
  • Elementet blir fullstendig usynlig og er ekskludert fra både skjermen og oppsettet.
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}
  • Ved å spesifisere flex vises elementet som en flexbox-beholder.
  • Den brukes til fleksibelt å arrangere og justere barnelementer (flex-items).
  • Ved bruk av flexbox kan barnelementer vises inline, med marginer og justering som automatisk tilpasses.
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}
  • Å spesifisere inline-flex viser elementet som en inline-flexbox-container.
  • Selv om det har flexbox-egenskaper, behandles det som et inline-element og vises på samme linje som andre elementer.
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}
  • Å spesifisere grid viser elementet som en grid-container.
  • Et grid-layout kan brukes til å stille opp barnelementer i rader og kolonner.
  • Barnelementer i grid-containeren er ryddig arrangert langs kolonner og rader.
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}
  • Å spesifisere inline-grid viser elementet som en inline-grid-container.
  • Det bruker grid-layout-systemet og behandles som et inline-element.
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}
  • Å spesifisere table viser elementet som en tabell. Det har et layout som ligner på HTML <table>, og dets barnelementer behandles som tabellceller.
  • Som i dette eksempelet, sett display-egenskapen for barneelementer til table-row eller table-cell.
    • Når table-row er angitt, oppfører elementet seg som en tabellrad (<tr>).
    • Når table-cell er angitt, oppfører elementet seg som en tabellcelle (<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}
  • Å spesifisere list-item viser elementet som et listeelement. Dette brukes på <li>-elementer som vanligvis brukes inne i <ul> eller <ol>.

position-egenskap 

 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 er en egenskap som styrer hvordan elementer plasseres i CSS. Denne egenskapen kan brukes til å plassere elementer relativt eller absolutt i forhold til deres forelder eller andre elementer, eller for å feste dem på plass.

Verdier for egenskapen position

static 
1.static-element {
2    position: static;
3}
  • I klassen static-element er position spesifisert som static. Elementet plasseres i den normale flyten.
  • static er standardverdien. Hvis position ikke er spesifisert, brukes static.
  • Elementet er posisjonert i henhold til det normale dokumentflyten. Egenskapene top, right, bottom, left kan ikke brukes.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • I klassen relative-element er position satt til relative. Elementet beveger seg i forhold til sin normale posisjon. I dette eksemplet er det plassert 10px ned og 20px til høyre.
  • Ved å spesifisere relative plasseres elementet relativt. Elementet flyttes fra sin opprinnelige posisjon til posisjonen som er spesifisert av egenskapene top, right, bottom, left, i henhold til normal dokumentflyt.
  • Et element med relativ posisjonering etterlater plass på sin opprinnelige posisjon selv etter flytting.
  • I dette eksemplet flyttes elementet 10 piksler ned og 20 piksler til høyre fra sin opprinnelige posisjon, men dokumentflyten behandles basert på den opprinnelige posisjonen.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • I klassen absolute-element er position satt til absolute. I dette eksempelet er elementet posisjonert 10 piksler ned og 20 piksler til høyre fra det øverste venstre hjørnet av forelderen (eller visningsvinduet).
  • Når absolute er angitt, posisjoneres elementet absolutt i forhold til forelderen. Hvis overordnet elements position er satt til relative, absolute eller fixed, flyttes elementet basert på denne forelderen ved hjelp av egenskapene top, right, bottom, left. Hvis ingen overordnet element finnes, blir det posisjonert i forhold til hele siden (viewport).
  • Et element med absolutt posisjonering fjernes fra den normale dokumentflyten og påvirker ikke andre elementer.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • I klassen fixed-element er position satt til fixed. Ved å spesifisere fixed plasseres elementet på en fast posisjon. Elementet er fikset til visningsområdet og beveger seg ikke når du scroller.
  • For eksempel brukes det til å holde en sideoverskrift eller navigasjonslinje alltid synlig.
  • I dette eksempelet er elementet festet til nederste høyre hjørne av skjermen og forblir der selv når siden rulles.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • I klassen sticky-element er position satt til sticky.
  • Når sticky er spesifisert, plasseres elementet dynamisk i henhold til rulling. Det følger den normale dokumentflyten, men når siden rulles, blir elementet "fast" på en spesifisert posisjon basert på verdiene top, right, bottom og left.
  • sticky oppfører seg som et fast element innenfor et bestemt område.
  • I dette eksemplet vises elementet i sin normale posisjon, men når siden rulles til den spesifiserte top-posisjonen, fester det seg til den og følger rullingen.

top, left, bottom, right egenskaper

top, left, bottom og right er egenskaper for å kontrollere elementposisjoner i CSS. Disse egenskapene brukes sammen med position-egenskapen for å angi hvor mye et element skal flyttes i en bestemt retning i forhold til sin posisjon.

Disse egenskapene gjelder imidlertid bare når position er satt til relative, absolute, fixed eller sticky. Med standardverdien static har disse egenskapene ingen effekt.

Hvordan bruke top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • top-egenskapen angir hvor langt et element skal forskyves fra toppen.
    • I dette eksemplet beveger elementet seg 20px ned fra sin normale posisjon.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • left-egenskapen angir hvor langt et element skal forskyves fra venstre.
    • I dette eksemplet beveger elementet seg 50px til høyre fra venstre.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • bottom-egenskapen angir hvor langt et element skal forskyves fra bunnen.
    • I dette eksemplet er elementet fast 10px over bunnen av skjermen. Det forblir på den posisjonen selv ved rulling.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • right-egenskapen angir hvor langt et element skal forskyves fra høyre.
    • I dette eksemplet, under rulling, beveger elementet seg 20px til venstre fra høyre og er fast på den posisjonen.

Forhold til position-egenskapen

  • relative: Flytter elementet med de angitte verdiene for top, left, bottom, right i forhold til sin normale posisjon.
  • absolute: Flytter elementet til den angitte top, left, bottom, right-posisjonen i forhold til nærmeste forfader med position satt til relative, absolute eller fixed.
  • fixed: Fester elementet på den angitte posisjonen i forhold til visningsområdet (hele skjermen). Det forblir på den posisjonen selv ved rulling.
  • sticky: Elementet forblir i sin normale posisjon til det når en angitt posisjon under rulling, hvor det deretter "fester seg".

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Tabell-relaterte CSS-egenskaperCSS-egenskaper relatert til Flexbox