Articles
Introducción a CSS
Propiedades de CSS relacionadas con el diseño

Propiedades de CSS relacionadas con el diseño

Este artículo explica las propiedades de CSS relacionadas con el diseño.

Puedes aprender sobre el uso y cómo escribir las propiedades display y position.

YouTube Video

HTML para vista previa

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

Propiedad display

La propiedad display es una propiedad de CSS que define cómo se muestra el elemento. Determina en qué formato se renderiza el elemento, como block, inline, flex, grid o hidden.

Valores de la propiedad display

block 
1.block-element {
2    display: block;
3    width: 400px;
4    background-color: lightblue;
5    padding: 10px;
6    margin-bottom: 10px;
7}
  • Al especificar block, el elemento se muestra como un elemento de nivel de bloque.
  • Los elementos de bloque se muestran en una nueva línea dentro de la página, moviendo otros elementos a la línea siguiente.
  • Los elementos típicos de bloque incluyen <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}
  • Al especificar inline, el elemento se muestra como un elemento en línea.
  • Los elementos en línea se muestran en la misma línea que los elementos vecinos y están alineados horizontalmente.
  • Los elementos en línea típicos incluyen <span>, <a>, <strong>, etc.
  • Los elementos en línea se colocan en la misma línea que otros elementos en línea y se muestran de forma continua en horizontal, a diferencia de los elementos de bloque.
inline-block 
1.inline-block-element {
2    display: inline-block;
3    width: 200px;
4    background-color: lightblue;
5    padding: 10px;
6}
  • Especificar inline-block muestra el elemento como un elemento en línea, pero también posee características de los elementos de bloque.
  • Los elementos inline-block se muestran en la misma línea que otros elementos en línea, pero puedes configurar altura y ancho como los elementos de bloque.
  • Los elementos <img>, <button> y <canvas> se comportan como inline-block por defecto.
none 
1div.none-element {
2    display: none;
3    background-color: lightblue;
4    padding: 10px;
5}
  • Especificar none hace que el elemento no se muestre.
  • El elemento se vuelve completamente invisible y se excluye tanto de la pantalla como del diseño.
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}
  • Especificar flex muestra el elemento como un contenedor de flexbox.
  • Se utiliza para organizar y alinear de forma flexible los elementos secundarios (flex items).
  • Usar flexbox permite que los elementos secundarios se muestren en línea, con márgenes y alineación ajustados automáticamente.
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}
  • Especificar inline-flex muestra el elemento como un contenedor de caja flexible en línea.
  • Aunque posee características de caja flexible, se trata como un elemento en línea y se muestra en la misma línea que otros elementos.
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}
  • Especificar grid muestra el elemento como un contenedor de cuadrícula.
  • Se puede aplicar un diseño de cuadrícula para alinear los elementos secundarios en filas y columnas.
  • Los elementos secundarios dentro del contenedor de cuadrícula están ordenados cuidadosamente a lo largo de columnas y filas.
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}
  • Especificar inline-grid muestra el elemento como un contenedor de cuadrícula en línea.
  • Usa el sistema de diseño de cuadrícula y se trata como un elemento en línea.
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}
  • Especificar table muestra el elemento como una tabla. Tiene un diseño similar a una <table> de HTML, y sus elementos secundarios se tratan como celdas de tabla.
  • Como en este ejemplo, establece la propiedad display de los elementos secundarios en table-row o table-cell.
    • Cuando se especifica table-row, el elemento se comporta como una fila de tabla (<tr>).
    • Cuando se especifica table-cell, el elemento se comporta como una celda de tabla (<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}
  • Especificar list-item muestra el elemento como un elemento de lista. Se aplica a elementos <li>, que se usan típicamente dentro de <ul> o <ol>.

Propiedad 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 es una propiedad que controla cómo se posicionan los elementos en CSS. Esta propiedad se puede usar para posicionar elementos de forma relativa o absoluta con respecto a su elemento padre u otros elementos, o para fijarlos en su lugar.

Valores de la propiedad position

static 
1.static-element {
2    position: static;
3}
  • En la clase static-element, position se especifica como static. El elemento se posiciona en el flujo normal.
  • static es el valor predeterminado. Si no se especifica position, se aplica static.
  • El elemento se posiciona según el flujo normal del documento. No se pueden usar las propiedades top, right, bottom, left.
relative 
1.relative-element {
2    position: relative;
3    top: 10px;
4    left: 20px;
5}
  • En la clase relative-element, position se establece en relative. El elemento se mueve en relación con su posición normal. En este ejemplo, se posiciona 10px hacia abajo y 20px hacia la derecha.
  • Especificar relative posiciona el elemento de forma relativa. El elemento se mueve de su posición original a la posición especificada por las propiedades top, right, bottom, left, siguiendo el flujo normal del documento.
  • Un elemento configurado con posicionamiento relativo deja espacio en su posición original incluso después de moverse.
  • En este ejemplo, el elemento se mueve 10 píxeles hacia abajo y 20 píxeles hacia la derecha desde su posición original, pero el flujo del documento se procesa basado en la posición original.
absolute 
1.absolute-element {
2    position: absolute;
3    top: 10px;
4    left: 20px;
5}
  • En la clase absolute-element, position se establece en absolute. En este ejemplo, el elemento se posiciona a 10 píxeles hacia abajo y 20 píxeles hacia la derecha desde la esquina superior izquierda de su elemento padre (o el área visible).
  • Cuando se especifica absolute, el elemento se posiciona de forma absoluta en relación con su elemento padre. Si la propiedad position del elemento padre está configurada como relative, absolute o fixed, el elemento se mueve con base en ese padre utilizando las propiedades top, right, bottom, left. Si no se encuentra un elemento padre, se posiciona con respecto a toda la página (viewport).
  • Un elemento configurado con posicionamiento absoluto se elimina del flujo normal del documento y no afecta a otros elementos.
fixed 
1.fixed-element {
2    position: fixed;
3    top: 0;
4    right: 0;
5}
  • En la clase fixed-element, position se establece en fixed. Especificar fixed posiciona el elemento en una ubicación fija. El elemento está fijo en el área visible y no se mueve al desplazarse.
  • Por ejemplo, se usa para mantener un encabezado de página o barra de navegación siempre visibles.
  • En este ejemplo, el elemento está fijado a la esquina inferior derecha de la pantalla y permanece ahí incluso cuando se desplaza la página.
sticky 
1.sticky-element {
2    position: sticky;
3    top: 0;
4}
  • En la clase sticky-element, position se establece en sticky.
  • Cuando se especifica sticky, el elemento se posiciona dinámicamente según el desplazamiento. Sigue el flujo normal del documento, pero cuando se desplaza la página, el elemento se "fija" en una posición específica basada en los valores especificados de top, right, bottom y left.
  • sticky se comporta como un elemento fijo dentro de un cierto rango.
  • En este ejemplo, el elemento se muestra en su posición normal, pero cuando la página se desplaza hasta la posición top especificada, se fija en esa posición y sigue el desplazamiento.

Propiedades top, left, bottom, right

top, left, bottom y right son propiedades para controlar las posiciones de los elementos en CSS. Estas propiedades se usan junto con la propiedad position para especificar cuánto mover un elemento en cierta dirección con respecto a su posición.

Sin embargo, estas propiedades solo se aplican cuando la propiedad position está configurada a relative, absolute, fixed o sticky. En el valor predeterminado static, estas propiedades no tienen efecto.

Cómo usar top, left, bottom, right

top 
1.relative-element {
2    position: relative;
3    top: 20px; /* Positioned 20px from the top */
4}
  • La propiedad top especifica cuán lejos debe desplazarse un elemento desde la parte superior.
    • En este ejemplo, el elemento se mueve 20px hacia abajo desde su posición normal.
left 
1.absolute-element {
2    position: absolute;
3    left: 50px; /* Positioned 50px from the left */
4}
  • La propiedad left especifica qué tan lejos debe estar un elemento desplazado desde la izquierda.
    • En este ejemplo, el elemento se mueve 50px a la derecha desde la izquierda.
bottom 
1.fixed-element {
2    position: fixed;
3    bottom: 10px; /* Positioned 10px from the bottom */
4}
  • La propiedad bottom especifica qué tan lejos debe estar un elemento desplazado desde la parte inferior.
    • En este ejemplo, el elemento está fijado a 10px por encima de la parte inferior de la pantalla. Permanece en esa posición incluso al desplazarse.
right 
1.sticky-element {
2    position: sticky;
3    right: 20px; /* Positioned 20px from the right */
4}
  • La propiedad right especifica qué tan lejos debe estar un elemento desplazado desde la derecha.
    • En este ejemplo, durante el desplazamiento, el elemento se mueve 20px hacia la izquierda desde la derecha y se fija en esa posición.

Relación con la propiedad position

  • relative: Mueve el elemento según los valores especificados de top, left, bottom, right con relación a su posición normal.
  • absolute: Mueve el elemento a la ubicación especificada por top, left, bottom, right en relación con el ancestro más cercano que tenga position configurado como relative, absolute o fixed.
  • fixed: Fija el elemento en la posición especificada con relación al viewport (toda la pantalla). Permanece en esa posición incluso al desplazarse.
  • sticky: El elemento permanece en su posición normal hasta que alcanza una posición especificada durante el desplazamiento, momento en el cual "se adhiere" a esa posición.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS relacionadas con tablasPropiedades CSS relacionadas con Flexbox