Articles
Einführung in CSS
Layout-bezogene CSS-Eigenschaften

Layout-bezogene CSS-Eigenschaften

Dieser Artikel erklärt layout-bezogene CSS-Eigenschaften.

Sie können die Verwendung und Schreibweise der Eigenschaften display und position lernen.

YouTube Video

HTML zur Vorschau

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

Die display-Eigenschaft ist eine CSS-Eigenschaft, die definiert, wie das Element angezeigt wird. Sie bestimmt, in welchem Format das Element gerendert wird, z. B. als Block, Inline, Flex, Grid oder verborgen.

display-Eigenschaftswerte

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Durch die Angabe von block wird das Element als Block-Element angezeigt.
  • Block-Elemente werden in einer neuen Zeile auf der Seite angezeigt, wodurch andere Elemente in die nächste Zeile verschoben werden.
  • Typische Block-Elemente sind <div>, <p>, <h1>, <section>, <article> usw.
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}
  • Durch die Angabe von inline wird das Element als Inline-Element angezeigt.
  • Inline-Elemente werden in derselben Zeile wie benachbarte Elemente angezeigt und horizontal ausgerichtet.
  • Typische Inline-Elemente sind <span>, <a>, <strong> usw.
  • Inline-Elemente werden in derselben Zeile wie andere Inline-Elemente platziert und kontinuierlich horizontal angezeigt, im Gegensatz zu Block-Elementen.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Die Angabe von inline-block zeigt das Element als Inline-Element an, jedoch mit Eigenschaften eines Block-Elements.
  • Inline-Block-Elemente werden in derselben Zeile wie andere Inline-Elemente angezeigt, aber Sie können Höhe und Breite wie bei Block-Elementen festlegen.
  • <img>, <button> und <canvas>-Elemente verhalten sich standardmäßig wie inline-block.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Durch die Angabe von none wird das Element nicht angezeigt.
  • Das Element wird vollständig unsichtbar und sowohl vom Bildschirm als auch vom Layout ausgeschlossen.
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}
  • Die Angabe von flex zeigt das Element als Flexbox-Container an.
  • Es wird verwendet, um untergeordnete Elemente (Flex-Items) flexibel anzuordnen und auszurichten.
  • Mit Flexbox können untergeordnete Elemente inline angezeigt werden, wobei Abstände und Ausrichtung automatisch angepasst werden.
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}
  • Das Festlegen von inline-flex zeigt das Element als einen Inline-Flexbox-Container an.
  • Obwohl es Flexbox-Eigenschaften besitzt, wird es wie ein Inline-Element behandelt und in derselben Zeile wie andere Elemente angezeigt.
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}
  • Das Festlegen von grid zeigt das Element als einen Raster-Container an.
  • Ein Raster-Layout kann verwendet werden, um Kindelemente in Reihen und Spalten anzuordnen.
  • Kindelemente innerhalb des Raster-Containers werden sauber in Spalten und Reihen angeordnet.
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}
  • Das Festlegen von inline-grid zeigt das Element als einen Inline-Raster-Container an.
  • Es verwendet das Raster-Layout-System und wird wie ein Inline-Element behandelt.
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}
  • Das Festlegen von table zeigt das Element als eine Tabelle an. Es hat ein Layout ähnlich wie eine HTML-<table>, und seine Kindelemente werden wie Tabellenzellen behandelt.
  • Wie in diesem Beispiel, setzen Sie die display-Eigenschaft der Kindelemente auf table-row oder table-cell.
    • Wenn table-row angegeben ist, verhält sich das Element wie eine Tabellenzeile (<tr>).
    • Wenn table-cell angegeben ist, verhält sich das Element wie eine Tabellenzelle (<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}
  • Das Festlegen von list-item zeigt das Element als ein Listenelement an. Es wird auf <li>-Elemente angewendet, die typischerweise innerhalb von <ul> oder <ol> verwendet werden.

position-Eigenschaft 

 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 ist eine Eigenschaft, die steuert, wie Elemente in CSS positioniert werden. Diese Eigenschaft kann verwendet werden, um Elemente relativ oder absolut zu ihrem übergeordneten Element oder anderen Elementen zu positionieren oder sie fest an einer Stelle zu verankern.

Werte der Eigenschaft position

static 
1.static-element {
2    position: static;
3}
  • In der Klasse static-element wird position als static angegeben. Das Element wird im normalen Fluss positioniert.
  • static ist der Standardwert. Wenn position nicht angegeben ist, wird static angewendet.
  • Das Element wird gemäß dem normalen Dokumentenfluss positioniert. Die Eigenschaften top, right, bottom, left können nicht verwendet werden.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • In der Klasse relative-element ist position auf relative gesetzt. Das Element bewegt sich relativ zu seiner normalen Position. In diesem Beispiel ist das Element 10px nach unten und 20px nach rechts positioniert.
  • Die Angabe von relative positioniert das Element relativ. Das Element bewegt sich von seiner ursprünglichen Position zur durch die Eigenschaften top, right, bottom, left angegebenen Position und folgt dabei dem normalen Dokumentenfluss.
  • Ein relativ positioniertes Element hinterlässt Platz an seiner ursprünglichen Position, auch nachdem es verschoben wurde.
  • In diesem Beispiel bewegt sich das Element 10 Pixel nach unten und 20 Pixel nach rechts von seiner ursprünglichen Position, aber der Dokumentenfluss wird basierend auf der ursprünglichen Position verarbeitet.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • In der Klasse absolute-element ist position auf absolute gesetzt. In diesem Beispiel wird das Element 10 Pixel nach unten und 20 Pixel nach rechts von der oberen linken Ecke seines Elternelements (oder des Viewports) positioniert.
  • Wenn absolute angegeben ist, wird das Element absolut relativ zu seinem Elternelement positioniert. Wenn die position des Elternelements auf relative, absolute oder fixed gesetzt ist, bewegt sich das Element entsprechend diesem Elternteil unter Verwendung der Eigenschaften top, right, bottom, left. Wenn kein Elternelement gefunden wird, wird es relativ zur gesamten Seite (Viewport) positioniert.
  • Ein absolut positioniertes Element wird aus dem normalen Dokumentenfluss entfernt und beeinflusst andere Elemente nicht.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • In der Klasse fixed-element ist position auf fixed gesetzt. Die Angabe von fixed positioniert das Element an einer festen Position. Das Element ist an das Ansichtsfenster fixiert und bewegt sich beim Scrollen nicht.
  • Es wird beispielsweise verwendet, um einen Seitenkopf oder eine Navigationsleiste immer sichtbar zu halten.
  • In diesem Beispiel ist das Element an der unteren rechten Ecke des Bildschirms fixiert und bleibt dort, auch wenn die Seite gescrollt wird.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • In der Klasse sticky-element ist die Eigenschaft position auf sticky gesetzt.
  • Wenn sticky angegeben wird, wird das Element dynamisch entsprechend dem Scrollen positioniert. Es folgt dem normalen Dokumentenfluss, aber wenn die Seite gescrollt wird, "haftet" das Element an einer bestimmten Position basierend auf den angegebenen Werten für top, right, bottom und left.
  • sticky verhält sich wie ein festes Element innerhalb eines bestimmten Bereichs.
  • In diesem Beispiel wird das Element in seiner normalen Position angezeigt, aber wenn die Seite bis zur angegebenen top-Position gescrollt wird, haftet es an dieser Position und folgt dem Scrollen.

Eigenschaften top, left, bottom, right

top, left, bottom und right sind Eigenschaften zur Steuerung der Position von Elementen in CSS. Diese Eigenschaften werden zusammen mit der position-Eigenschaft verwendet, um zu bestimmen, wie weit ein Element relativ zu seiner Position in eine bestimmte Richtung verschoben werden soll.

Diese Eigenschaften gelten jedoch nur, wenn position auf relative, absolute, fixed oder sticky gesetzt ist. Beim Standardwert static haben diese Eigenschaften keine Wirkung.

Verwendung von top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • Die top-Eigenschaft gibt an, wie weit ein Element von oben versetzt werden soll.
    • In diesem Beispiel wird das Element 20px von seiner normalen Position nach unten verschoben.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • Die left-Eigenschaft gibt an, wie weit ein Element von links versetzt werden soll.
    • In diesem Beispiel wird das Element 50px von links nach rechts verschoben.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • Die bottom-Eigenschaft gibt an, wie weit ein Element von unten versetzt werden soll.
    • In diesem Beispiel ist das Element 10px über dem unteren Rand des Bildschirms fixiert. Es bleibt auch beim Scrollen in dieser Position.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • Die right-Eigenschaft gibt an, wie weit ein Element von rechts versetzt werden soll.
    • In diesem Beispiel wird das Element bei scrollen 20px von rechts nach links verschoben und in dieser Position fixiert.

Beziehung zur position-Eigenschaft

  • relative: Verschiebt das Element um die angegebenen top-, left-, bottom-, right-Werte relativ zu seiner normalen Position.
  • absolute: Verschiebt das Element an die angegebene Position (top, left, bottom, right) relativ zum nächsten Vorfahren mit position auf relative, absolute oder fixed.
  • fixed: Fixiert das Element an der angegebenen Position relativ zum Viewport (dem gesamten Bildschirm). Es bleibt auch beim Scrollen in dieser Position.
  • sticky: Das Element bleibt in seiner normalen Position, bis es während des Scrollens eine bestimmte Position erreicht; an dieser Position wird es dann „festgehalten“.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Tabellenbezogene CSS-EigenschaftenFlexbox-bezogene CSS-Eigenschaften