Articles
Introduction au CSS
Propriétés CSS liées à la disposition

Propriétés CSS liées à la disposition

Cet article explique les propriétés CSS liées à la disposition.

Vous pouvez apprendre à utiliser et à écrire les propriétés display et position.

YouTube Video

HTML pour l'aperçu

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

Propriété display

La propriété display est une propriété CSS qui définit comment l'élément est affiché. Elle détermine le format dans lequel l'élément est rendu, tel que block, inline, flex, grid ou masqué.

Valeurs de la propriété display

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • En spécifiant block, l'élément est affiché comme un élément de niveau bloc.
  • Les éléments bloc sont affichés sur une nouvelle ligne dans la page, déplaçant les autres éléments à la ligne suivante.
  • Les éléments bloc typiques incluent <div>, <p>, <h1>, <section>, <article>, etc.
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}
  • En spécifiant inline, l'élément est affiché comme un élément en ligne.
  • Les éléments en ligne sont affichés sur la même ligne que les éléments voisins et sont alignés horizontalement.
  • Les éléments en ligne typiques incluent <span>, <a>, <strong>, etc.
  • Les éléments en ligne sont placés sur la même ligne que d'autres éléments en ligne et sont affichés horizontalement en continu, contrairement aux éléments bloc.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • En spécifiant inline-block, l'élément est affiché comme un élément en ligne, mais il possède également des caractéristiques d'un élément bloc.
  • Les éléments en ligne-bloc sont affichés sur la même ligne que d'autres éléments en ligne, mais vous pouvez définir la hauteur et la largeur comme pour les éléments bloc.
  • Les éléments <img>, <button> et <canvas> se comportent comme inline-block par défaut.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • En spécifiant none, l'élément n'est pas affiché.
  • L'élément devient complètement invisible et est exclu à la fois de l'écran et de la disposition.
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}
  • En spécifiant flex, l'élément est affiché comme un conteneur flexbox.
  • Il est utilisé pour organiser et aligner les éléments enfants (éléments flexibles) de manière flexible.
  • L'utilisation de flexbox permet d'afficher les éléments enfants en ligne, avec des marges et un alignement ajustés automatiquement.
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}
  • Spécifier inline-flex affiche l'élément en tant que conteneur flexbox en ligne.
  • Tout en possédant les caractéristiques du flexbox, il est traité comme un élément en ligne et affiché sur la même ligne que d'autres éléments.
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}
  • Spécifier grid affiche l'élément en tant que conteneur de grille.
  • Une mise en page par grille peut être appliquée pour aligner les éléments enfants en rangées et colonnes.
  • Les éléments enfants dans le conteneur de grille sont soigneusement organisés en colonnes et rangées.
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}
  • Spécifier inline-grid affiche l'élément en tant que conteneur de grille en ligne.
  • Il utilise le système de mise en page par grille et est traité comme un élément en ligne.
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}
  • Spécifier table affiche l'élément sous forme de tableau. Il a une mise en page similaire au tableau HTML <table>, et ses éléments enfants sont traités comme des cellules de tableau.
  • Comme dans cet exemple, définissez la propriété display des éléments enfants sur table-row ou table-cell.
    • Lorsqu'table-row est spécifié, l'élément se comporte comme une ligne de tableau (<tr>).
    • Lorsqu'table-cell est spécifié, l'élément se comporte comme une cellule de tableau (<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}
  • Spécifier list-item affiche l'élément comme un élément de liste. Il est appliqué aux éléments <li> généralement utilisés dans <ul> ou <ol>.

Propriété 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 est une propriété qui contrôle la façon dont les éléments sont positionnés en CSS. Cette propriété peut être utilisée pour positionner les éléments de manière relative ou absolue par rapport à leur parent ou à d'autres éléments, ou pour les fixer en place.

Valeurs de la propriété position

static 
1.static-element {
2    position: static;
3}
  • Dans la classe static-element, la propriété position est spécifiée comme static. L'élément est positionné dans le flux normal.
  • static est la valeur par défaut. Si position n'est pas spécifiée, la valeur static est appliquée.
  • L'élément est positionné selon le flux normal du document. Les propriétés top, right, bottom, left ne peuvent pas être utilisées.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • Dans la classe relative-element, la propriété position est définie sur relative. L'élément se déplace par rapport à sa position normale. Dans cet exemple, il est positionné à 10px en bas et à 20px à droite.
  • Spécifier relative positionne l'élément de manière relative. L'élément se déplace de sa position d'origine à la position spécifiée par les propriétés top, right, bottom, left, tout en suivant le flux normal du document.
  • Un élément positionné en relative laisse un espace à sa position d'origine même après s'être déplacé.
  • Dans cet exemple, l'élément se déplace de 10 pixels vers le bas et de 20 pixels vers la droite à partir de sa position d'origine, mais le flux du document est traité en fonction de la position d'origine.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • Dans la classe absolute-element, la propriété position est définie sur absolute. Dans cet exemple, l'élément est positionné à 10 pixels en bas et 20 pixels à droite du coin supérieur gauche de son parent (ou de la fenêtre d'affichage).
  • Lorsqu'absolute est spécifié, l'élément est positionné de façon absolue par rapport à son parent. Si la propriété position de l'élément parent est définie sur relative, absolute ou fixed, l'élément se positionne en fonction de ce parent à l'aide des propriétés top, right, bottom, left. Si aucun élément parent n'est trouvé, il est positionné par rapport à l'ensemble de la page (viewport).
  • Un élément positionné en absolute est retiré du flux normal du document et n'affecte pas les autres éléments.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • Dans la classe fixed-element, la propriété position est définie sur fixed. Spécifier fixed positionne l'élément à un emplacement fixe. L'élément est fixé au viewport et ne bouge pas lors du défilement.
  • Par exemple, il est utilisé pour garder un en-tête de page ou une barre de navigation toujours visible.
  • Dans cet exemple, l'élément est fixé au coin inférieur droit de l'écran et reste à cet endroit même lorsque la page est défilée.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • Dans la classe sticky-element, la propriété position est définie sur sticky.
  • Lorsque la valeur sticky est spécifiée, l'élément est positionné dynamiquement en fonction du défilement. Il suit le flux normal du document, mais lorsque la page défile, l'élément devient "fixe" à une position spécifique en fonction des valeurs spécifiées dans top, right, bottom et left.
  • sticky se comporte comme un élément fixe dans une certaine plage.
  • Dans cet exemple, l'élément est affiché dans sa position normale, mais lorsque la page défile jusqu'à la position top spécifiée, il reste fixe à cette position et suit le défilement.

Les propriétés top, left, bottom, right

top, left, bottom et right sont des propriétés pour contrôler les positions des éléments en CSS. Ces propriétés sont utilisées avec la propriété position pour spécifier à quel point déplacer un élément dans une certaine direction par rapport à sa position.

Cependant, ces propriétés ne s’appliquent que lorsque la propriété position est définie sur relative, absolute, fixed ou sticky. Avec la valeur par défaut static, ces propriétés n'ont aucun effet.

Comment utiliser top, left, bottom et right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • La propriété top spécifie à quelle distance un élément doit être décalé depuis le haut.
    • Dans cet exemple, l'élément se déplace de 20px vers le bas par rapport à sa position normale.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • La propriété left spécifie à quelle distance un élément doit être décalé depuis la gauche.
    • Dans cet exemple, l'élément se déplace de 50px vers la droite depuis la gauche.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • La propriété bottom spécifie à quelle distance un élément doit être décalé depuis le bas.
    • Dans cet exemple, l'élément est fixé à 10px au-dessus du bas de l'écran. Il reste dans cette position même lors du défilement.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • La propriété right spécifie à quelle distance un élément doit être décalé depuis la droite.
    • Dans cet exemple, lors du défilement, l'élément se déplace de 20px vers la gauche depuis la droite et est fixé à cette position.

Relation avec la propriété position

  • relative : Déplace l'élément des valeurs top, left, bottom, right spécifiées par rapport à sa position normale.
  • absolute : Déplace l'élément à l'emplacement spécifié par top, left, bottom, right par rapport à l'ancêtre le plus proche avec position défini sur relative, absolute ou fixed.
  • fixed : Fixe l'élément à la position spécifiée par rapport à la fenêtre d'affichage (l'écran entier). Il reste dans cette position même lors du défilement.
  • sticky : L'élément reste dans sa position normale jusqu'à ce qu'il atteigne une position spécifiée lors du défilement, après quoi il "reste collé" à cette position.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Propriétés CSS liées aux tableauxPropriétés CSS liées à Flexbox