Articles
Introduzione al CSS
Proprietà CSS relative al layout

Proprietà CSS relative al layout

Questo articolo spiega le proprietà CSS relative al layout.

Puoi imparare l'utilizzo e come scrivere le proprietà display e position.

YouTube Video

HTML per Anteprima

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

Proprietà display

La proprietà display è una proprietà CSS che definisce come viene visualizzato l'elemento. Determina in quale formato viene renderizzato l'elemento, come block, inline, flex, grid o nascosto.

Valori della proprietà display

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Specificando block, l'elemento viene visualizzato come elemento a livello di blocco.
  • Gli elementi a blocco vengono visualizzati su una nuova riga all'interno della pagina, spostando gli altri elementi alla riga successiva.
  • Tipici elementi a blocco includono <div>, <p>, <h1>, <section>, <article>, ecc.
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}
  • Specificando inline, l'elemento viene visualizzato come elemento inline.
  • Gli elementi inline vengono visualizzati sulla stessa riga degli elementi vicini e sono allineati orizzontalmente.
  • Tipici elementi inline includono <span>, <a>, <strong>, ecc.
  • Gli elementi inline vengono posizionati sulla stessa riga di altri elementi inline e vengono visualizzati orizzontalmente in modo continuo, a differenza degli elementi a blocco.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Specificando inline-block, l'elemento viene visualizzato come elemento inline, ma possiede anche caratteristiche degli elementi a blocco.
  • Gli elementi inline-block vengono visualizzati sulla stessa riga di altri elementi inline, ma è possibile impostare altezza e larghezza come per gli elementi a blocco.
  • Gli elementi <img>, <button> e <canvas> si comportano come inline-block per impostazione predefinita.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Specificando none, l'elemento non viene visualizzato.
  • L'elemento diventa completamente invisibile ed è escluso sia dallo schermo che dal layout.
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}
  • Specificando flex, l'elemento viene visualizzato come contenitore flexbox.
  • È utilizzato per organizzare e allineare in modo flessibile gli elementi figli (flex items).
  • Utilizzando il flexbox, gli elementi figli possono essere visualizzati inline, con margini e allineamento regolati automaticamente.
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}
  • Specificare inline-flex visualizza l'elemento come un contenitore flexbox in linea.
  • Pur possedendo caratteristiche flexbox, viene trattato come un elemento in linea e visualizzato sulla stessa riga degli altri elementi.
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}
  • Specificare grid visualizza l'elemento come un contenitore a griglia.
  • Un layout a griglia può essere applicato per allineare gli elementi figli in righe e colonne.
  • Gli elementi figli all'interno del contenitore a griglia sono disposti ordinatamente lungo colonne e righe.
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}
  • Specificare inline-grid visualizza l'elemento come un contenitore a griglia in linea.
  • Utilizza il sistema di layout a griglia ed è trattato come un elemento in linea.
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}
  • Specificare table visualizza l'elemento come una tabella. Ha un layout simile a <table> in HTML e i suoi elementi figli vengono trattati come celle della tabella.
  • Come in questo esempio, imposta la proprietà display degli elementi figli su table-row o table-cell.
    • Quando viene specificato table-row, l'elemento si comporta come una riga di tabella (<tr>).
    • Quando viene specificato table-cell, l'elemento si comporta come una cella di tabella (<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}
  • Specificare list-item visualizza l'elemento come un elemento di lista. È applicato agli elementi <li> comunemente usati all'interno di <ul> o <ol>.

Proprietà 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 è una proprietà che controlla come gli elementi sono posizionati in CSS. Questa proprietà può essere utilizzata per posizionare gli elementi in modo relativo o assoluto rispetto al loro genitore o ad altri elementi, oppure per fissarli in un punto specifico.

Valori della proprietà position

static 
1.static-element {
2    position: static;
3}
  • Nella classe static-element, la proprietà position è specificata come static. L'elemento è posizionato nel flusso normale.
  • static è il valore predefinito. Se position non è specificato, viene applicato static.
  • L'elemento è posizionato secondo il normale flusso del documento. Le proprietà top, right, bottom, left non possono essere utilizzate.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • Nella classe relative-element, la proprietà position è impostata su relative. L'elemento si sposta rispetto alla sua posizione normale. In questo esempio, è posizionato 10px in basso e 20px a destra.
  • Specificando relative, l'elemento viene posizionato in modo relativo. L'elemento si sposta dalla sua posizione originale alla posizione specificata dalle proprietà top, right, bottom, left, seguendo il normale flusso del documento.
  • Un elemento con posizione relativa lascia spazio nella sua posizione originale anche dopo lo spostamento.
  • In questo esempio, l'elemento si sposta di 10 pixel verso il basso e 20 pixel a destra dalla sua posizione originale, ma il flusso del documento viene elaborato sulla base della posizione originale.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • Nella classe absolute-element, la proprietà position è impostata su absolute. In questo esempio, l'elemento è posizionato a 10 pixel verso il basso e 20 pixel a destra rispetto all'angolo in alto a sinistra del suo elemento padre (o della finestra di visualizzazione).
  • Quando viene specificato absolute, l'elemento è posizionato in modo assoluto rispetto al suo elemento padre. Se la proprietà position dell'elemento padre è impostata su relative, absolute o fixed, l'elemento si sposta in base a quel genitore utilizzando le proprietà top, right, bottom, left. Se non viene trovato un elemento padre, viene posizionato rispetto all'intera pagina (viewport).
  • Un elemento con posizionamento assoluto viene rimosso dal normale flusso del documento e non influenza gli altri elementi.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • Nella classe fixed-element, la proprietà position è impostata su fixed. Specificando fixed, l'elemento viene posizionato in una posizione fissa. L'elemento è fissato al viewport e non si sposta durante lo scorrimento.
  • Ad esempio, viene utilizzato per mantenere sempre visibile un'intestazione di pagina o una barra di navigazione.
  • In questo esempio, l'elemento è fissato all'angolo in basso a destra dello schermo e rimane lì anche quando la pagina viene scorsa.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • Nella classe sticky-element, position è impostato su sticky.
  • Quando viene specificato sticky, l'elemento viene posizionato dinamicamente in base allo scrolling. Segue il normale flusso del documento, ma quando la pagina viene scorsa, l'elemento si "blocca" in una posizione specifica in base ai valori specificati di top, right, bottom e left.
  • sticky si comporta come un elemento fisso all'interno di un determinato intervallo.
  • In questo esempio, l'elemento viene visualizzato nella sua posizione normale, ma quando la pagina viene scorsa fino alla posizione specificata di top, si blocca in quella posizione e segue lo scrolling.

Proprietà top, left, bottom, right

top, left, bottom e right sono proprietà per controllare la posizione degli elementi in CSS. Queste proprietà vengono utilizzate insieme alla proprietà position per specificare di quanto spostare un elemento in una certa direzione rispetto alla sua posizione.

Tuttavia, queste proprietà si applicano solo quando position è impostato su relative, absolute, fixed o sticky. Con il valore predefinito static, queste proprietà non hanno alcun effetto.

Come utilizzare top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • La proprietà top specifica di quanto un elemento deve essere spostato dal bordo superiore.
    • In questo esempio, l'elemento si sposta di 20px verso il basso rispetto alla sua posizione normale.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • La proprietà left specifica di quanto un elemento deve essere spostato dal bordo sinistro.
    • In questo esempio, l'elemento si sposta di 50px verso destra dal bordo sinistro.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • La proprietà bottom specifica di quanto un elemento deve essere spostato dal bordo inferiore.
    • In questo esempio, l'elemento è fissato a 10px sopra il bordo inferiore dello schermo. Rimane in quella posizione anche durante lo scorrimento.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • La proprietà right specifica di quanto un elemento deve essere spostato dal bordo destro.
    • In questo esempio, durante lo scorrimento, l'elemento si sposta di 20px verso sinistra rispetto al bordo destro e rimane fisso in quella posizione.

Relazione con la proprietà position

  • relative: Sposta l'elemento dei valori specificati di top, left, bottom, right rispetto alla sua posizione normale.
  • absolute: Sposta l'elemento nella posizione specificata di top, left, bottom, right rispetto all'antenato più vicino con position impostato su relative, absolute o fixed.
  • fixed: Fissa l'elemento nella posizione specificata rispetto al viewport (l'intero schermo). Rimane in quella posizione anche durante lo scorrimento.
  • sticky: L'elemento rimane nella sua posizione normale fino a quando non raggiunge una posizione specificata durante lo scorrimento, a quel punto si "fissa" in quella posizione.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative alle tabelleProprietà CSS relative a Flexbox