path: root/files/es/learn/css/css_layout/introducción/index.html

---
title: Introducción al diseño en CSS
slug: Learn/CSS/CSS_layout/Introducción
translation_of: Learn/CSS/CSS_layout/Introduction
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>

<p class="summary">Este artículo resumirá algunas de las características de diseño de páginas web con CSS que ya hemos mencionado en módulos anteriores, como los diferentes valores de {{cssxref ("display")}}, e introducirá algunos de los conceptos que vamos a tratar en este módulo.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Proporcionar una visión general de las técnicas de diseño de páginas web con CSS. Cada técnica se puede aprender con mayor detalle en tutoriales posteriores.</td>
  </tr>
 </tbody>
</table>

<p>Las técnicas de diseño de páginas web con CSS nos permiten controlar dónde se ubican los elementos que están contenidos en una página web en relación con su posición predeterminada en el flujo de diseño normal, así como el resto de elementos a su alrededor, su contenedor principal o la vista/ventana principal. Las técnicas de diseño de páginas web que trataremos con más detalle en este módulo son:</p>

<ul>
 <li>Flujo normal</li>
 <li>La propiedad {{cssxref ("display")}}</li>
 <li>Flexbox</li>
 <li>Grid</li>
 <li>Floats</li>
 <li>Posicionamiento</li>
 <li>Diseño de tablas</li>
 <li>Diseño a varias columnas</li>
</ul>

<p>Cada técnica tiene sus usos, ventajas y desventajas, y ninguna técnica está diseñada para usarse de forma aislada. Si entiendes para qué se ha diseñado cada método, te será fácil comprender cuál es la mejor herramienta de diseño para cada tarea.</p>

<h2 id="Flujo_normal">Flujo normal</h2>

<p>El flujo normal es el modo como el navegador presenta las páginas HTML de forma predeterminada cuando no haces nada para controlar el diseño de página. Echemos un vistazo rápido a un ejemplo HTML:</p>

<pre class="brush: html notranslate">&lt;p&gt;Amo a mi gato.&lt;/p&gt;

&lt;ul&gt;
  &lt;li&gt;Comprar comida para gatos&lt;/li&gt;
  &lt;li&gt;Ejercicio&lt;/li&gt;
  &lt;li&gt;Anímate amigo&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;¡Fin!&lt;/p&gt;</pre>

<p>Por defecto, el navegador mostrará este código de la manera siguiente:</p>

<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>

<p>Observa aquí cómo se muestra el HTML en el orden exacto en que aparece en el código fuente, con los elementos uno debajo del otro: el primer párrafo, seguido de la lista desordenada, y a continuación el segundo párrafo.</p>

<p>Los elementos que aparecen uno debajo del otro se describen como <em>elementos de bloque</em>, en contraposición con los <em>elementos de línea</em>, que aparecen uno al lado del otro, como las palabras de un párrafo.</p>

<div class="note">
<p><strong>Nota</strong>: La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.</p>
</div>

<p>Cuando usas CSS para crear un diseño de página web, alejas los elementos del flujo normal, pero para muchos de los elementos de tu página, el flujo normal proporciona exactamente el diseño que necesitas. Por esta razón resulta tan importante comenzar con un documento HTML bien estructurado, porque te permite trabajar ya con la forma en que las cosas se presentan por defecto, en lugar de tener que luchar contra ello.</p>

<p>Los métodos que permiten cambiar la disposición de los elementos en CSS son los siguientes:</p>

<ul>
 <li><strong>La propiedad {{cssxref ("display")}}</strong>: los valores estándar como <code>block</code>, <code>inline</code> o <code>inline-block</code> pueden cambiar el comportamiento de los elementos en el flujo normal (consulta <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">Tipos de cajas en CSS</a> para obtener más información). Luego hay métodos de diseño completos que se activan con un valor <code>display</code>, por ejemplo <a href="/es/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> y <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li>
 <li><strong>Floats</strong>: la aplicación de un valor {{cssxref ("float")}} como <code>left</code> puede hacer que los elementos de nivel de bloque rodeen el elemento por uno de sus lados, como la forma en que las imágenes a veces tienen texto flotando a su alrededor en los diseños de algunas revistas.</li>
 <li><strong>La propiedad {{cssxref ("position")}}</strong>: permite controlar con precisión la ubicación de las cajas dentro de otras cajas. El posicionamiento estático es el valor predeterminado en el flujo normal, pero puede hacer que los elementos se distribuyan de manera diferente si se utilizan otros valores, por ejemplo, pueden estar siempre fijados a la parte superior izquierda de la ventana del navegador.</li>
 <li><strong>Diseño de tablas</strong>: se pueden usar las características que sirven para diseñar las partes de una tabla HTML en elementos que no son de tabla con <code>display: table</code> y las propiedades asociadas.</li>
 <li><strong>Diseño en varias columnas</strong>: las propiedades de <a href="/es/docs/Web/CSS/Columnas_CSS">diseño en varias columnas</a> permiten distribuir el contenido de un bloque en columnas, como en el caso de un periódico.</li>
</ul>

<h2 id="La_propiedad_display">La propiedad display</h2>

<p>Los métodos principales para lograr el diseño de páginas web con CSS son todos los valores de la propiedad <code>display</code>. Esta propiedad permite cambiar la forma predeterminada en que algo se muestra. Todo en flujo normal tiene un valor de <code>display</code>, utilizado como la forma como se comportan por defecto los elementos en los que están configurados. Por ejemplo, el hecho de que los párrafos en español se muestran uno debajo del otro se debe a que presentan la configuración <code>display: block</code>. Si creas un enlace alrededor de un texto dentro de un párrafo, ese enlace permanece en línea con el resto del texto y no se divide al pasar a una línea nueva. Esto se debe a que el elemento {{htmlelement ("a")}} es por defecto <code>display: inline</code>.</p>

<p>Puedes cambiar este comportamiento predeterminado de visualización (<code>display</code>). Por ejemplo, el elemento {{htmlelement ("li")}} es <code>display: block</code> de forma predeterminada, lo que significa que los elementos de la lista se muestran uno debajo del otro en nuestro documento en español. Si cambiamos el valor de visualización a <code>inline</code>, ahora se muestran uno al lado del otro, como lo harían las palabras de una frase. El hecho de que puedas cambiar el valor de <code>display</code> de cualquier elemento significa que puedes elegir elementos HTML por su significado semántico, sin preocuparte por cómo se verán. La forma en que se ven es algo que puedes cambiar.</p>

<p>Además de poder cambiar la presentación predeterminada de un elemento <code>block</code> a un elemento <code>inline</code> y viceversa, hay algunos métodos de diseño de página más poderosos que se inician como un valor de <code>display</code>. Sin embargo, cuando los uses, en general vas a necesitar propiedades adicionales. Los dos valores más importantes para nuestros propósitos cuando hablamos del diseño de páginas web son <code>display: flex</code> y <code>display: grid</code>.</p>

<h2 id="Flexbox">Flexbox</h2>

<p>Flexbox es el nombre corto del <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">módulo de diseño de cajas flexibles</a>, pensado para facilitarnos la distribución de las cosas en una dimensión, ya sea como una fila o como una columna. Para usar el método Flexbox, aplica <code>display: flex</code> al elemento padre de los elementos que deseas distribuir; todos sus elementos hijo directos se convierten en elementos flexibles. Vamos a verlo en un ejemplo sencillo.</p>

<p>El marcado HTML siguiente nos proporciona un elemento contenedor con una clase <code>wrapper</code> dentro del cual hay tres elementos {{htmlelement ("div")}}. Por defecto, estos elementos se mostrarían como elementos de bloque, uno debajo del otro, en nuestro documento en español.</p>

<p>Sin embargo, si añadimos <code>display: flex</code> al elemento padre, los tres elementos se organizan en columnas. Esto se debe a que se convierten en <em>elementos flexibles</em> y se ven afectados por algunos valores iniciales que el método Flexbox establece en el contenedor flexible. Se muestran en una fila porque el valor inicial de {{cssxref ("flex-direction")}} establecido en su elemento padre es <code>row</code>. Todos parecen expandirse hasta la altura del elemento de más altura, porque el valor inicial de la propiedad {{cssxref ("align-items")}} establecida en su elemento primario es <code>stretch</code>. Esto significa que los artículos se expanden hasta la altura del contenedor flexible, que en este caso está definida por el artículo de mayor altura. Todos los artículos se alinean al comienzo del contenedor y dejan el espacio que sobra al final de la fila.</p>

<div id="Flex_1">
<div class="hidden">
<h6 id="Ejemplo_Flexbox_1">Ejemplo Flexbox 1</h6>

<pre class="brush: css notranslate">* {box-sizing: border-box;}

.wrapper &gt; div {
    border-radius: 5px;
    background-color: rgb(207,232,220);
    padding: 1em;
}
    </pre>
</div>

<pre class="brush: css notranslate">.wrapper {
  display: flex;
}
</pre>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
  &lt;div class="box1"&gt;Uno&lt;/div&gt;
  &lt;div class="box2"&gt;Dos&lt;/div&gt;
  &lt;div class="box3"&gt;Tres&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>

<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>

<p>Además de las propiedades anteriores, que pueden aplicarse a contenedores flexibles, también hay propiedades que pueden aplicarse a los elementos flexibles. Estas propiedades, entre otras cosas, pueden cambiar el comportamiento de estos elementos flexibles y permitirles expandirse y contraerse para adaptarse al espacio disponible.</p>

<p>Como un ejemplo sencillo de esto podemos añadir la propiedad {{cssxref ("flex")}} a todos nuestros elementos secundarios, con un valor de <code>1</code>. Esto hará que todos los elementos crezcan y llenen el contenedor, en lugar de dejar espacio al final. Si hay más espacio, los artículos se ensancharán; si hay menos espacio, se volverán más estrechos. Además, si añades al código otro elemento, todos los elementos se volverán más pequeños para dejarle espacio; ajustarán el tamaño para ocupar la misma cantidad de espacio, cualquiera que sea.</p>

<div id="Flex_2">
<div class="hidden">
<h6 id="Ejemplo_Flexbox_2">Ejemplo Flexbox 2</h6>

<pre class="brush: css notranslate">* {box-sizing: border-box;}

    .wrapper &gt; div {
        border-radius: 5px;
        background-color: rgb(207,232,220);
        padding: 1em;
    }</pre>
</div>

<pre class="brush: css notranslate">.wrapper {
    display: flex;
}

.wrapper &gt; div {
    flex: 1;
}
</pre>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box1"&gt;Uno&lt;/div&gt;
    &lt;div class="box2"&gt;Dos&lt;/div&gt;
    &lt;div class="box3"&gt;Tres&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>

<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>

<div class="note">
<p><strong>Nota</strong>: Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p>
</div>

<h2 id="Diseño_de_cuadrícula">Diseño de cuadrícula</h2>

<p>Mientras que el método Flexbox está pensado para distribuir elementos unidimensionalmente, el diseño de cuadrícula está diseñado para distribuir elementos en dos dimensiones: alinear elementos en filas y columnas.</p>

<p>Una vez más, puedes activar el diseño de páginas web en cuadrícula con un valor de visualización específico: <code>display: grid</code>. El ejemplo siguiente utiliza un marcado similar al del ejemplo del método Flexbox, con un contenedor y algunos elementos secundarios. Además de usar <code>display: grid</code>, también definimos algunos tramos de filas y columnas en el elemento padre con las propiedades {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}}. Hemos definido tres columnas, cada una de <code>1fr</code>, y dos filas de <code>100px</code>. No necesitamos poner ninguna regla sobre los elementos secundarios porque se colocan automáticamente en las celdas que nuestra cuadrícula ha creado.</p>

<div id="Grid_1">
<div class="hidden">
<h6 id="Ejemplo_de_cuadrícula_1">Ejemplo de cuadrícula 1</h6>

<pre class="brush: css notranslate">* {box-sizing: border-box;}

    .wrapper &gt; div {
        border-radius: 5px;
        background-color: rgb(207,232,220);
        padding: 1em;
    }</pre>
</div>

<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}
</pre>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box1"&gt;Uno&lt;/div&gt;
    &lt;div class="box2"&gt;Dos&lt;/div&gt;
    &lt;div class="box3"&gt;Tres&lt;/div&gt;
    &lt;div class="box4"&gt;Cuatro&lt;/div&gt;
    &lt;div class="box5"&gt;Cinco&lt;/div&gt;
    &lt;div class="box6"&gt;Seis&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>

<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>

<p>Cuando ya tienes una cuadrícula, se puede colocar tus elementos en ella explícitamente en lugar de confiar en el comportamiento de colocación automática que hemos visto arriba. En el segundo ejemplo, hemos definido la misma cuadrícula, pero esta vez con tres elementos secundarios. Hemos establecido la línea de inicio y final de cada elemento con las propiedades {{cssxref ("grid-column")}} y {{cssxref ("grid-row")}}. Esto hace que los elementos abarquen varios tramos.</p>

<div id="Grid_2">
<div class="hidden">
<h6 id="Ejemplo_de_cuadrícula_2">Ejemplo de cuadrícula 2</h6>

<pre class="brush: css notranslate">* {box-sizing: border-box;}

    .wrapper &gt; div {
        border-radius: 5px;
        background-color: rgb(207,232,220);
        padding: 1em;
    }</pre>
</div>

<pre class="brush: css notranslate">.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}
</pre>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
    &lt;div class="box1"&gt;Uno&lt;/div&gt;
    &lt;div class="box2"&gt;Dos&lt;/div&gt;
    &lt;div class="box3"&gt;Tres&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>

<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>

<div class="note">
<p><strong>Nota</strong>: Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Grids">Diseñar cuadrículas</a>.</p>
</div>

<p>El resto de esta guía expone otros métodos de diseño de páginas web que son menos importantes para las estructuras principales de diseño de tu página web, pero que pueden serte de ayuda para tareas específicas. Si entiendes la naturaleza de cada una de las tareas de diseño de una página web, vas a descubrir enseguida que a menudo vas a ser capaz de discernir qué tipo de diseño se adapta mejor a cada componente de tu diseño particular.</p>

<h2 id="Floats">Floats</h2>

<p>El método de flotación de un elemento cambia el comportamiento de ese elemento y de los elementos de nivel de bloque que lo siguen en el flujo normal. El elemento es desplazado hacia la izquierda o hacia la derecha y es eliminado del flujo normal, y el contenido circundante flota alrededor de este elemento.</p>

<p>La propiedad {{cssxref ("float")}} tiene cuatro valores posibles:</p>

<ul>
 <li><code>left</code>: establece la flotación a la izquierda del elemento.</li>
 <li><code>right</code>: establece la flotación a la derecha del elemento.</li>
 <li><code>none</code>: especifica que no hay flotación en absoluto. Este es el valor predeterminado.</li>
 <li><code>inherit</code>: especifica que el valor de la propiedad <code>float</code> debe heredarse del elemento padre.</li>
</ul>

<p>En el ejemplo siguiente, establecemos una flotación a la izquierda para un elemento <code>&lt;div&gt;</code> y le damos un {{cssxref ("margin")}} a la derecha para mantener el texto alejado del elemento. Esto nos da el efecto del texto envuelto alrededor de ese cuadro, y es la mayor parte de lo que necesitas saber sobre la flotación, tal como se utiliza en el diseño web moderno.</p>

<div id="Float_1">
<div class="hidden">
<h6 id="Ejemplo_de_flotación">Ejemplo de flotación</h6>

<pre class="brush: css notranslate">body {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

p {
    line-height: 2;
    word-spacing: 0.1rem;
}

.box {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    border-radius: 5px;
}
</pre>
</div>

<pre class="brush: html notranslate">&lt;h1&gt;Ejemplo sencillo de flotación&lt;/h1&gt;

&lt;div class="box"&gt;Float&lt;/div&gt;

&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

</pre>

<pre class="brush: css notranslate">
.box {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}
</pre>
</div>

<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>

<div class="note">
<p><strong>Nota</strong>: El método de flotación se explica al completo en nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Floats">las propiedades float y clear</a>. El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de diseño heredados</a>.</p>
</div>

<h2 id="Técnicas_de_posicionamiento">Técnicas de posicionamiento</h2>

<p>El posicionamiento permite mover un elemento desde donde se colocaría cuando está en flujo normal a otra ubicación. El posicionamiento no es un método para crear diseños de página principal, se trata más bien de administrar y ajustar la posición de elementos específicos en la página.</p>

<p>Sin embargo, hay técnicas útiles para ciertos patrones de diseños de páginas web que se basan en la propiedad {{cssxref ("position")}}. Comprender el posicionamiento también ayuda a comprender el flujo normal y qué implica sacar un elemento del flujo normal.</p>

<p>Hay cinco tipos de posicionamiento que debes conocer:</p>

<ul>
 <li>El <strong>posicionamiento estático</strong> es el valor por defecto que tiene establecido cada elemento, esto significa sencillamente «coloca el elemento en su posición normal en el flujo de diseño del documento, nada especial que ver aquí».</li>
 <li>El <strong>posicionamiento relativo</strong> permite modificar la posición de un elemento en la página y moverlo con respecto a su posición en el flujo normal, lo que incluye superposiciones con otros elementos de la página.</li>
 <li>El <strong>posicionamiento absoluto</strong> mueve un elemento completamente fuera del flujo de diseño normal de la página, como si estuviera asentado en una capa separada propia. A partir de aquí, puedes fijarlo en una posición relativa a los bordes del elemento <code>&lt;html&gt;</code> de la página (o su elemento padre más próximo). Esto es útil para crear efectos complejos de diseño de página, como cuadros con pestañas en que diferentes paneles de contenido se ubican uno encima del otro y se muestran y ocultan según se desee, o paneles de información que por defecto se asientan fuera de la pantalla, pero puedes hacer que se deslicen hacia la pantalla usando un control de tipo botón.</li>
 <li>El <strong>posicionamiento fijo</strong> es muy similar al posicionamiento absoluto, excepto que corrige un elemento relativo a la ventana gráfica del navegador, no otro elemento. Esto es útil para crear efectos, como un menú de navegación persistente que siempre permanece en el mismo lugar en la pantalla al contrario que el contenido, que se desplaza.</li>
 <li>El <strong>posicionamiento <em>sticky</em> (pegajoso)</strong> es un método de posicionamiento más reciente que hace que un elemento actúe como <code>position: static</code> hasta que alcanza un desplazamiento definido con respecto a la ventana gráfica, en cuyo punto actúa como un elemento con la propiedad <code>position: fixed</code>.</li>
</ul>

<h3 id="Ejemplo_sencillo_de_posicionamiento">Ejemplo sencillo de posicionamiento</h3>

<p>Para familiarizarte con estas técnicas de diseño de página, te mostraremos un par de ejemplos rápidos. Todos nuestros ejemplos contarán con el mismo HTML, que es el siguiente:</p>

<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento&lt;/h1&gt;

&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
&lt;p class="positioned"&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>

<p>Aplicaremos a este HTML un estilo predeterminado definido por el CSS siguiente:</p>

<pre class="brush: css notranslate">body {
  width: 500px;
  margin: 0 auto;
}

p {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}
</pre>

<p>La salida que se obtiene es la siguiente:</p>

<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p>

<h3 id="El_posicionamiento_relativo">El posicionamiento relativo</h3>

<p>El posicionamiento relativo permite compensar un elemento desde la posición por defecto que tendría en flujo normal. Esto significa que podrías hacer una tarea como mover un icono un poco hacia abajo para que se alinee con una etiqueta de texto. Para ello, podríamos añadir la regla de posicionamiento relativo siguiente:</p>

<pre class="brush: css notranslate">.positioned {
  position: relative;
  top: 30px;
  left: 30px;
}</pre>

<p>Aquí asignamos el valor <code>relative</code> a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio: esto no hace nada por sí solo, así que también añadimos las propiedades {{cssxref ("top")}} y {{cssxref ( "left")}}, que sirven para mover el elemento afectado hacia abajo y a la derecha. Esto puede parecer lo contrario de lo que esperabas, pero debes pensar en ello como un elemento al que se empuja por sus lados superior e izquierdo, lo que resulta en un movimiento a la derecha y abajo.</p>

<p>Añadir este código dará el resultado siguiente:</p>

<div id="Relative_1">
<div class="hidden">
<h6 id="Ejemplo_de_posicionamiento_relativo">Ejemplo de posicionamiento relativo</h6>

<pre class="brush: html notranslate">&lt;h1&gt;El posicionamiento relativo&lt;/h1&gt;

&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
&lt;p class="positioned"&gt;Este es mi elemento con posicionamiento relativo. &lt;/p&gt;
&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>

<pre class="brush: css notranslate">body {
  width: 500px;
  margin: 0 auto;
}

p {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}
</pre>
</div>

<pre class="brush: css notranslate">.positioned {
  position: relative;
  background: rgba(255,84,104,.3);
  border: 2px solid rgb(255,84,104);
  top: 30px;
  left: 30px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>

<h3 id="El_posicionamiento_absoluto">El posicionamiento absoluto</h3>

<p>El posicionamiento absoluto se utiliza para eliminar por completo un elemento del flujo normal y colocarlo mediante desplazamientos desde los bordes de un bloque contenedor.</p>

<p>Volviendo a nuestro ejemplo original no posicionado, podríamos añadir la regla CSS siguiente para implementar el posicionamiento absoluto:</p>

<pre class="brush: css notranslate">.positioned {
  position: absolute;
  top: 30px;
  left: 30px;
}</pre>

<p>Aquí le damos a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio un valor de <code>absolute</code>, y le asignamos las mismas propiedades {{cssxref ("top")}} y {{cssxref ("left")}}. Sin embargo, ahora añadir este código da el resultado siguiente:</p>

<div id="Absolute_1">
<div class="hidden">
<h6 id="Ejemplo_de_posicionamiento_absoluto">Ejemplo de posicionamiento absoluto</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento absoluto&lt;/h1&gt;

&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;
&lt;p class="positioned"&gt;Este es mi elemento con posicionamiento absoluto. &lt;/p&gt;
&lt;p&gt;Soy un elemento básico de nivel de bloque.&lt;/p&gt;</pre>

<pre class="brush: css notranslate">body {
  width: 500px;
  margin: 0 auto;
}

p {
    background-color: rgb(207,232,220);
    border: 2px solid rgb(79,185,227);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}
</pre>
</div>

<pre class="brush: css notranslate">.positioned {
    position: absolute;
    background: rgba(255,84,104,.3);
    border: 2px solid rgb(255,84,104);
    top: 30px;
    left: 30px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>

<p>¡Este resultado es muy diferente! El elemento posicionado ahora se ha separado por completo del resto del diseño de la página y se superpone encima de este. Los otros dos párrafos ahora se asientan juntos, como si su hermano con posicionamiento absoluto no existiera. Las propiedades {{cssxref ("top")}} y {{cssxref ("left")}} tienen un efecto diferente en elementos con posicionamiento absoluto que en elementos con posicionamiento relativo. En este caso, los desplazamientos se han calculado desde la parte superior e izquierda de la página. Es posible cambiar el elemento padre para que se convierta en este tipo de contenedor, y lo veremos en el artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">posicionamiento</a>.</p>

<h3 id="Posicionamiento_fijo">Posicionamiento fijo</h3>

<p>El posicionamiento fijo elimina nuestro elemento del flujo de documentos de la misma manera que el posicionamiento absoluto. Sin embargo, en lugar de contar los desplazamientos en relación con el contenedor, se cuentan con respecto a la ventana gráfica. Como el elemento permanece fijo en relación con la ventana gráfica, podemos crear efectos como un menú que permanece fijo mientras la página se desplaza por debajo de él.</p>

<p>En este ejemplo nuestro HTML tiene tres párrafos de texto para poder tener una página que se desplace, y un cuadro al que asignamos la propiedad <code>position: fixed</code>.</p>

<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento fijo&lt;/h1&gt;

&lt;div class="positioned"&gt;Fijo&lt;/div&gt;

&lt;p&gt;Párrafo 1.&lt;/p&gt;
&lt;p&gt;Párrafo 2.&lt;/p&gt;
&lt;p&gt;Párrafo 3.&lt;/p&gt;
</pre>

<div id="Fixed_1">
<div class="hidden">
<h6 id="Ejemplo_de_posicionamiento_fijo">Ejemplo de posicionamiento fijo</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento fijo&lt;/h1&gt;

&lt;div class="positioned"&gt;Fijo&lt;/div&gt;

&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;

&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;</pre>

<pre class="brush: css notranslate">body {
    width: 500px;
    margin: 0 auto;
}

.positioned {
    background: rgba(255,84,104,.3);
    border: 2px solid rgb(255,84,104);
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
}</pre>
</div>

<pre class="brush: css notranslate">.positioned {
    position: fixed;
    top: 30px;
    left: 30px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>

<h3 id="Posicionamiento_pegajoso">Posicionamiento pegajoso</h3>

<p>El posicionamiento pegajoso es el último método de posicionamiento que tenemos a nuestra disposición. Mezcla el posicionamiento estático predeterminado con el posicionamiento fijo. Cuando un elemento tiene la propiedad <code>position: sticky</code>, se desplaza en flujo normal hasta que se alcanzan los desplazamientos con respecto a la ventana gráfica que hemos definido. En ese punto se queda «atascado» como si tuviera configurado un valor <code>position: fixed</code>.</p>

<div id="Sticky_1">
<div class="hidden">
<h6 id="Ejemplo_de_posicionamiento_pegajoso">Ejemplo de posicionamiento pegajoso</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Posicionamiento pegajoso&lt;/h1&gt;

&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;

&lt;div class="positioned"&gt;Pegajoso&lt;/div&gt;

&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;

&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>

<pre class="brush: css notranslate">body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255,84,104,.3);
  border: 2px solid rgb(255,84,104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}</pre>
</div>

<pre class="brush: css notranslate">.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}</pre>
</div>

<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>

<div class="note">
<p><strong>Nota</strong>: para obtener más información sobre el posicionamiento, consulta nuestro artículo <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a>.</p>
</div>

<h2 id="Diseño_de_tablas">Diseño de tablas</h2>

<p>Las tablas HTML sirven para mostrar datos tabulados, pero hace muchos años, antes incluso de que el CSS básico fuera compatible de forma fiable en todos los navegadores, los desarrolladores web también usaban tablas para hacer el diseño completo de una página web, colocando en las diversas filas y columnas de una tabla los títulos de encabezado de la página, los pies de página, las diferentes columnas, etc. Esto funcionó en ese momento, pero presenta muchos problemas: los diseños de tabla no son flexibles, requieren mucho código de marcado, son difíciles de depurar y no son semánticamente correctos (por ejemplo, los usuarios de lectores de pantalla tienen problemas para navegar por estos diseños de página web con tablas).</p>

<p>El aspecto que presenta una tabla en una página web cuando usas el código de marcado de una tabla se debe a un conjunto de propiedades CSS que definen el diseño de la tabla. Estas propiedades se pueden usar para diseñar elementos que no son tablas, un uso que a veces se describe como «usar tablas CSS».</p>

<p>El ejemplo siguiente muestra uno de esos usos; el uso de tablas CSS para el diseño debe considerarse en este punto un método heredado, para aquellas situaciones en las que tienes navegadores muy antiguos que no son compatibles con los métodos Flexbox o Grid.</p>

<p>Veamos un ejemplo. Primero, un código de marcado sencillo que crea un formulario HTML. Cada elemento de entrada tiene una etiqueta, y también hemos incluido un título dentro de un párrafo. Cada par etiqueta/entrada está delimitado por un elemento {{htmlelement ("div")}}, con fines de compaginación.</p>

<pre class="brush: html notranslate">&lt;form&gt;
  &lt;p&gt;En primer lugar, díganos su nombre y edad.&lt;/p&gt;
  &lt;div&gt;
    &lt;label for="fname"&gt;Nombre:&lt;/label&gt;
    &lt;input type="text" id="fname"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="lname"&gt;Apellidos:&lt;/label&gt;
    &lt;input type="text" id="lname"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="age"&gt;Edad:&lt;/label&gt;
    &lt;input type="text" id="age"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>Ahora, el CSS para nuestro ejemplo. La mayor parte del CSS es bastante común, excepto por los usos de la propiedad {{cssxref ("display")}}. A los elementos {{htmlelement ("form")}}, {{htmlelement ("div")}}, {{htmlelement ("label")}} y {{htmlelement ("input")}} se les dice que se muestren como una tabla, filas de tabla y celdas de tabla, respectivamente; actuarán básicamente como marcas de tabla HTML, y lograrán por defecto la alineación perfecta de las etiquetas y las entradas. Todo lo que hay que hacer es añadir un poco de tamaños, márgenes, etc., para que todo se vea un poco mejor, ¡y listo!</p>

<p>Observa que se la ha proporcionado al párrafo de encabezado <code>display: table-caption;,</code> lo que hace que actúe como una celda de encabezado ({{htmlelement ("caption")}}) de la tabla; y con <code>caption-side: bottom;</code> se le dice a la celda de encabezado que se asiente en la parte inferior de la tabla con fines de aplicación de estilo, aunque en el código fuente el marcado está antes que los elementos <code>&lt;input&gt;</code>. Esto permite un poco de flexibilidad.</p>

<pre class="brush: css notranslate">html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}</pre>

<p>Esto nos da el resultado siguiente:</p>

<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p>

<p>También puedes ver este ejemplo en vivo en <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (ver el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">código fuente</a>).</p>

<h2 id="Diseño_en_columnas">Diseño en columnas</h2>

<p>El módulo de diseño en columnas nos proporciona un modo de distribuir el contenido en columnas, de forma similar al modo como el texto fluye en un periódico. Aunque en un contexto web leer en columnas de arriba a abajo no resulta tan útil porque podría obligar a los usuarios a tener que hacer desplazamientos de arriba a abajo, la técnica de organizar el contenido en columnas también puede tener su utilidad.</p>

<p>Para convertir un bloque en un contenedor, utilizamos la propiedad {{cssxref ("column-count")}}, que le dice al navegador cuántas columnas nos gustaría tener, o {{cssxref ("column-width")}}, que le dice al navegador que llene el contenedor con tantas columnas de al menos ese ancho.</p>

<p>En el ejemplo siguiente comenzamos con un bloque de HTML dentro de un elemento <code>&lt;div&gt;</code> que contiene una clase <code>container</code>.</p>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
    &lt;H1&gt;Diseño en columnas&lt;/ h1&gt;

    &lt;p&gt;Párrafo 1.&lt;/p&gt;
    &lt;p&gt;Párrafo 2.&lt;/p&gt;

&lt;/div&gt;
</pre>

<p>Utilizamos un <code>column-width</code> de 200 píxeles en ese contenedor, que crea en el navegador tantas columnas de 200 píxeles como quepan en el contenedor y luego comparte el espacio restante entre las columnas creadas.</p>

<div id="Multicol_1">
<div class="hidden">
<h6 id="Ejemplo_de_diseño_en_columnas">Ejemplo de diseño en columnas</h6>

<pre class="brush: html notranslate">&lt;div class="container"&gt;
        &lt;h1&gt; Diseño en columnas &lt;/h1&gt;

        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;


        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;

    &lt;/div&gt;</pre>

<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre>
</div>

<pre class="brush: css notranslate">    .container {
        column-width: 200px;
    }</pre>
</div>

<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>

<h2 id="Resumen">Resumen</h2>

<p>Este artículo ha proporcionado un breve resumen de todas las tecnologías de diseño que debes conocer. ¡Sigue leyendo para obtener más información sobre cada tecnología individual!</p>

<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad en navegadores antiguos </a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li>
</ul>