Articles
Introductie tot CSS
CSS-eigenschappen gerelateerd aan lay-out

CSS-eigenschappen gerelateerd aan lay-out

Dit artikel legt CSS-eigenschappen uit die gerelateerd zijn aan lay-out.

Je kunt leren over het gebruik en hoe je de display- en position-eigenschappen schrijft.

YouTube Video

HTML voor Voorbeeldweergave

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

De display-eigenschap is een CSS-eigenschap die bepaalt hoe het element wordt weergegeven. Het bepaalt in welk formaat het element wordt weergegeven, zoals block, inline, flex, grid of verborgen.

display-eigenschap waarden

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Door block op te geven, wordt het element weergegeven als een block-level element.
  • Block-elementen worden op een nieuwe regel weergegeven, waarbij andere elementen naar de volgende regel worden verplaatst.
  • Typische block-elementen zijn <div>, <p>, <h1>, <section>, <article>, enz.
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}
  • Door inline op te geven, wordt het element weergegeven als een inline-element.
  • Inline-elementen worden op dezelfde regel als aangrenzende elementen weergegeven en zijn horizontaal uitgelijnd.
  • Typische inline-elementen zijn <span>, <a>, <strong>, enz.
  • Inline-elementen staan op dezelfde regel als andere inline-elementen en worden horizontaal doorlopend weergegeven, in tegenstelling tot block-elementen.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Door inline-block op te geven wordt het element weergegeven als een inline-element, maar het bezit ook eigenschappen van block-elementen.
  • Inline-block-elementen worden op dezelfde regel als andere inline-elementen weergegeven, maar je kunt hoogte en breedte instellen zoals bij block-elementen.
  • <img>, <button> en <canvas>-elementen gedragen zich standaard als inline-block.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Door none op te geven, wordt het element niet weergegeven.
  • Het element wordt volledig onzichtbaar en wordt uitgesloten van zowel het scherm als de lay-out.
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}
  • Door flex op te geven, wordt het element weergegeven als een flexbox-container.
  • Het wordt gebruikt om child-elementen (flex-items) flexibel te rangschikken en uit te lijnen.
  • Met flexbox kunnen child-elementen inline worden weergegeven, met automatisch aangepaste marges en uitlijning.
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}
  • Het specificeren van inline-flex toont het element als een inline-flexboxcontainer.
  • Hoewel het de eigenschappen van een flexbox heeft, wordt het behandeld als een inline-element en weergegeven op dezelfde regel als andere elementen.
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}
  • Het specificeren van grid toont het element als een gridcontainer.
  • Een gridopmaak kan worden toegepast om kindelementen in rijen en kolommen uit te lijnen.
  • Kindelementen binnen de gridcontainer worden netjes uitgelijnd langs kolommen en rijen.
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}
  • Het specificeren van inline-grid toont het element als een inline-gridcontainer.
  • Het maakt gebruik van het gridopmaaksysteem en wordt behandeld als een 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}
  • Het specificeren van table toont het element als een tabel. Het heeft een opmaak die lijkt op HTML <table>, en de kindelementen worden behandeld als tabelcellen.
  • Zoals in dit voorbeeld, stel de display-eigenschap van kindelementen in op table-row of table-cell.
    • Wanneer table-row is gespecifieerd, gedraagt het element zich als een tabelrij (<tr>).
    • Wanneer table-cell is gespecifieerd, gedraagt het element zich als een tabelcel (<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}
  • Het specificeren van list-item toont het element als een lijstitem. Het wordt toegepast op <li>-elementen die doorgaans worden gebruikt binnen <ul> of <ol>.

position-eigenschap 

 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 is een eigenschap die bepaalt hoe elementen in CSS worden gepositioneerd. Met deze eigenschap kunnen elementen relatief of absoluut worden gepositioneerd ten opzichte van hun ouder of andere elementen, of kunnen ze vastgezet worden op hun plaats.

Waarden van de eigenschap position

static 
1.static-element {
2    position: static;
3}
  • In de static-element-class is position gespecificeerd als static. Het element wordt gepositioneerd in de normale stroom.
  • static is de standaardwaarde. Als position niet is gespecificeerd, wordt static toegepast.
  • Het element wordt gepositioneerd volgens de normale documentstroom. De eigenschappen top, right, bottom, left kunnen niet worden gebruikt.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • In de relative-element-class is position ingesteld op relative. Het element beweegt relatief ten opzichte van zijn normale positie. In dit voorbeeld is het gepositioneerd 10px naar beneden en 20px naar rechts.
  • Met relative wordt het element relatief gepositioneerd. Het element verplaatst zich van zijn originele positie naar de positie die is gespecificeerd door de eigenschappen top, right, bottom, left, volgens de normale documentstroom.
  • Een element met relatieve positionering laat ruimte achter op zijn oorspronkelijke positie, zelfs na verplaatsing.
  • In dit voorbeeld beweegt het element 10 pixels naar beneden en 20 pixels naar rechts vanaf zijn oorspronkelijke positie, maar de documentstroom wordt verwerkt op basis van de oorspronkelijke positie.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • In de absolute-element-class is position ingesteld op absolute. In dit voorbeeld is het element 10 pixels naar beneden en 20 pixels naar rechts gepositioneerd vanaf de linkerbovenhoek van het ouder-element (of de viewport).
  • Wanneer absolute is gespecifieerd, wordt het element absoluut gepositioneerd ten opzichte van het ouder-element. Als de position van het ouder-element is ingesteld op relative, absolute of fixed, beweegt het element op basis van dat ouder-element met gebruik van de eigenschappen top, right, bottom, left. Als er geen ouder-element wordt gevonden, wordt het gepositioneerd ten opzichte van de hele pagina (viewport).
  • Een element met absolute positionering wordt verwijderd uit de normale documentstroom en beïnvloedt andere elementen niet.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • In de fixed-element-class is position ingesteld op fixed. Met fixed wordt het element op een vaste locatie gepositioneerd. Het element is vastgezet aan het viewport en beweegt niet mee bij het scrollen.
  • Het wordt bijvoorbeeld gebruikt om een pagina-header of navigatiebalk altijd zichtbaar te houden.
  • In dit voorbeeld is het element vastgezet in de rechteronderhoek van het scherm en blijft daar zelfs wanneer de pagina wordt gescrold.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • In de sticky-element klasse is de position ingesteld op sticky.
  • Wanneer sticky is gespecificeerd, wordt het element dynamisch gepositioneerd volgens het scrollen. Het volgt de normale documentstroom, maar wanneer de pagina wordt gescrold, blijft het element "vast" op een specifieke positie op basis van de opgegeven waarden voor top, right, bottom en left.
  • sticky gedraagt zich als een vast element binnen een bepaald bereik.
  • In dit voorbeeld wordt het element weergegeven op zijn normale positie, maar wanneer de pagina wordt gescrold tot de gespecificeerde top-positie, blijft het aan die positie vastzitten en volgt het het scrollen.

Eigenschappen top, left, bottom, right

top, left, bottom en right zijn eigenschappen voor het bepalen van de positie van elementen in CSS. Deze eigenschappen worden samen met de position-eigenschap gebruikt om te bepalen hoeveel een element wordt verplaatst in een bepaalde richting ten opzichte van zijn positie.

Deze eigenschappen zijn echter alleen van toepassing als position is ingesteld op relative, absolute, fixed of sticky. Bij de standaardwaarde static hebben deze eigenschappen geen effect.

Hoe gebruik je top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • De top-eigenschap specificeert hoe ver een element vanaf de bovenkant moet worden verplaatst.
    • In dit voorbeeld wordt het element 20px naar beneden verplaatst vanaf zijn normale positie.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • De left-eigenschap specificeert hoe ver een element vanaf de linkerkant moet worden verplaatst.
    • In dit voorbeeld wordt het element 50px naar rechts verplaatst vanaf de linkerzijde.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • De bottom-eigenschap specificeert hoe ver een element vanaf de onderkant moet worden verplaatst.
    • In dit voorbeeld wordt het element 10px boven de onderkant van het scherm vastgezet. Het blijft in die positie staan, zelfs tijdens het scrollen.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • De right-eigenschap specificeert hoe ver een element vanaf de rechterkant moet worden verplaatst.
    • In dit voorbeeld wordt het element tijdens het scrollen 20px naar links verplaatst vanaf de rechterkant en blijft het op die positie staan.

Relatie met de position-eigenschap

  • relative: Verplaatst het element met de gespecificeerde waarden voor top, left, bottom, right ten opzichte van zijn normale positie.
  • absolute: Verplaatst het element naar de gespecificeerde locatie voor top, left, bottom, right ten opzichte van de dichtstbijzijnde ouder met position ingesteld op relative, absolute of fixed.
  • fixed: Zet het element vast op de gespecificeerde positie ten opzichte van de viewport (het gehele scherm). Het blijft in die positie staan, zelfs tijdens het scrollen.
  • sticky: Het element blijft op zijn normale positie totdat het tijdens het scrollen een gespecificeerde positie bereikt, waarna het op die positie 'plakt'.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Tabelgerelateerde CSS-eigenschappenFlexbox-gerelateerde CSS-eigenschappen