Crear un diseño de posicionamiento fijo en CSS

Introducción

En este laboratorio, aprenderá a crear un diseño de posicionamiento fijo utilizando CSS, una técnica poderosa para mantener la colocación de los elementos en una página web. El laboratorio lo guiará a través de la comprensión del concepto de posicionamiento fijo, la configuración de una estructura de proyecto HTML y la aplicación del posicionamiento fijo a anuncios laterales mientras explora cómo los elementos pueden permanecer estáticos durante la navegación de la página.

Siguiendo las instrucciones paso a paso, adquirirá habilidades prácticas en el uso de propiedades de posicionamiento CSS como position: fixed, y aprenderá a controlar precisamente la colocación de los elementos utilizando las propiedades top, bottom, left y right. El laboratorio proporciona experiencia práctica en la creación de diseños responsivos y visualmente consistentes que mantienen su posición independientemente de la navegación de la página.

Comprender el concepto de posicionamiento fijo

En este paso, aprenderá sobre el posicionamiento fijo en CSS, una técnica de diseño poderosa que permite que los elementos permanezcan en una posición fija en la pantalla, independientemente del desplazamiento.

El posicionamiento fijo es un método de posicionamiento CSS que hace que un elemento quede en exactamente el mismo lugar en la pantalla, incluso cuando se desplaza la página. A diferencia de otros métodos de posicionamiento, los elementos fijos no se mueven cuando el usuario desplaza la página.

Exploremos el concepto básico con un ejemplo simple:

<!doctype html>
<html>
  <head>
    <style>
      .fixed-element {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #f1f1f1;
        padding: 10px;
        border: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div class="fixed-element">I'm a fixed element that stays in place!</div>
    <div style="height: 2000px;">
      Scroll down to see the fixed element remain in position
    </div>
  </body>
</html>

Características clave del posicionamiento fijo:

Utiliza position: fixed; en CSS
Se posiciona en relación con la ventana del navegador
No se mueve cuando se desplaza la página
Puede ser colocada con precisión utilizando las propiedades top, bottom, left y right

Salida de ejemplo al visualizar en un navegador:

El .fixed-element siempre permanecerá a 20 píxeles del borde superior y derecho de la pantalla
Incluso si se desplaza hacia abajo, este elemento permanece en la misma posición en la pantalla

Configurar la estructura del proyecto HTML

En este paso, creará la estructura del proyecto para nuestra demostración de diseño de posicionamiento fijo. Configuraremos un proyecto HTML simple en el directorio ~/proyecto que servirá como base para nuestro ejercicio de posicionamiento CSS.

Primero, navegue hasta el directorio del proyecto y cree los archivos necesarios:

cd ~/proyecto
mkdir fixed-positioning-demo
cd fixed-positioning-demo

Ahora, cree la estructura básica de archivos HTML:

touch index.html
touch styles.css

Abra el archivo index.html y agregue la siguiente estructura básica de HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>This is a sample page to demonstrate fixed positioning in CSS.</p>

      <!-- Agregaremos más contenido en pasos subsiguientes -->
    </div>
  </body>
</html>

Cree un archivo CSS básico styles.css con algunos estilos iniciales:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

Estructura de salida de ejemplo:

~/proyecto/fixed-positioning-demo/
├── index.html
└── styles.css

Esta configuración proporciona una estructura de proyecto limpia y simple en la que construiremos en los siguientes pasos para demostrar técnicas de posicionamiento fijo.

Aplicar posicionamiento fijo a anuncios laterales

En este paso, aprenderá a crear anuncios laterales de posicionamiento fijo utilizando CSS. Modificaremos los archivos index.html y styles.css para agregar elementos de anuncios laterales que permanecen en su lugar mientras se desplaza la página.

Actualice el archivo index.html para incluir elementos de anuncios laterales:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Anuncio lateral izquierdo</h3>
      <p>Este anuncio queda en su lugar!</p>
    </div>

    <div class="right-ad">
      <h3>Anuncio lateral derecho</h3>
      <p>Otro anuncio fijo</p>
    </div>

    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>
        Desplácese hacia abajo para ver cómo los anuncios laterales permanecen
        fijos.
      </p>

      <!-- Agregue más contenido para crear el efecto de desplazamiento -->
      <div style="height: 2000px;">
        Contenido largo para demostrar el desplazamiento
      </div>
    </div>
  </body>
</html>

Modifique el archivo styles.css para aplicar posicionamiento fijo a los anuncios:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.left-ad,
.right-ad {
  position: fixed;
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.left-ad {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.right-ad {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

Puntos clave sobre el posicionamiento fijo:

position: fixed; mantiene los anuncios en una posición constante
Las propiedades left y right posicionan los anuncios en los lados de la pantalla
top: 50% y transform: translateY(-50%) centran los anuncios verticalmente

Salida de ejemplo en el navegador:

Dos anuncios laterales aparecerán fijos en la pantalla
Los anuncios permanecen en su lugar al desplazar la página
Los anuncios están centrado verticalmente en la pantalla

Ajustar la colocación de elementos con las propiedades top y right

En este paso, aprenderá a controlar con precisión la colocación de elementos de posicionamiento fijo utilizando las propiedades top, right, bottom y left. Estas propiedades CSS le permiten posicionar elementos fijos exactamente donde desee en la pantalla.

Actualice el archivo styles.css para demostrar diferentes técnicas de posicionamiento:

/* Los estilos anteriores permanecen iguales */

.left-ad {
  position: fixed;
  top: 20px; /* 20 píxeles desde la parte superior de la pantalla */
  left: 20px; /* 20 píxeles desde el lado izquierdo de la pantalla */
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.right-ad {
  position: fixed;
  top: 50%; /* Centrado verticalmente */
  right: 20px; /* 20 píxeles desde el lado derecho de la pantalla */
  width: 150px;
  transform: translateY(-50%); /* Ajuste para centrado perfecto */
  background-color: #e4e4e4;
  padding: 10px;
  border: 1px solid #ccc;
}

.bottom-ad {
  position: fixed;
  bottom: 20px; /* 20 píxeles desde la parte inferior de la pantalla */
  left: 50%; /* Centrado horizontalmente */
  width: 300px;
  transform: translateX(-50%); /* Ajuste para centrado perfecto */
  background-color: #d4d4d4;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbb;
}

Actualice el index.html para incluir el nuevo anuncio inferior:

<body>
  <div class="left-ad">
    <h3>Anuncio lateral izquierdo</h3>
    <p>Posicionado 20px desde la esquina superior izquierda</p>
  </div>

  <div class="right-ad">
    <h3>Anuncio lateral derecho</h3>
    <p>Centrado verticalmente</p>
  </div>

  <div class="bottom-ad">
    <h3>Anuncio inferior</h3>
    <p>Centrado en la parte inferior de la pantalla</p>
  </div>

  <div class="content">
    <h1>Fixed Positioning Layout</h1>
    <p>Explore diferentes técnicas de posicionamiento</p>

    <div style="height: 2000px;">Desplace para ver los elementos fijos</div>
  </div>
</body>

Propiedades de posicionamiento clave explicadas:

top: Distancia desde la parte superior de la pantalla
right: Distancia desde el lado derecho de la pantalla
bottom: Distancia desde la parte inferior de la pantalla
left: Distancia desde el lado izquierdo de la pantalla
transform: Ajuste fino de la posicionamiento para centrado perfecto

Salida de ejemplo en el navegador:

Anuncio izquierdo: 20 píxeles desde la esquina superior izquierda
Anuncio derecho: Centrado verticalmente en el lado derecho
Anuncio inferior: Centrado en la parte inferior de la pantalla
Todos los elementos permanecen fijos durante el desplazamiento

Probar el comportamiento de desplazamiento de elementos fijos

En este paso, explorará el comportamiento de desplazamiento único de los elementos de posicionamiento fijo agregando más contenido para demostrar cómo estos elementos permanecen estacionarios mientras se desplaza la página.

Actualice el archivo index.html para incluir más contenido para desplazar:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Scroll Test</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Anuncio izquierdo</h3>
      <p>Me quedo en su lugar!</p>
    </div>

    <div class="right-ad">
      <h3>Anuncio derecho</h3>
      <p>Siempre visible</p>
    </div>

    <div class="bottom-ad">
      <h3>Anuncio inferior</h3>
      <p>Fijado en la parte inferior</p>
    </div>

    <div class="content">
      <h1>Demonstración del comportamiento de desplazamiento</h1>

      <div class="scroll-content">
        <h2>Desplace hacia abajo para ver los elementos fijos</h2>

        <!-- Cree contenido largo para habilitar el desplazamiento -->
        <div class="long-content">
          <h3>Sección de contenido largo</h3>
          <p>
            Esta sección le permitirá desplazarse y observar cómo los elementos
            de posicionamiento fijo permanecen en su lugar.
          </p>

          <!-- Repita los párrafos para crear contenido desplazable -->
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in
            dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.
          </p>

          <!-- Agregue múltiples repeticiones para crear una longitud de desplazamiento significativa -->
          <p>
            Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in
            nulla enim. Phasellus molestie magna non est bibendum non venenatis
            nisl tempor.
          </p>

          <!-- Repita párrafos similares múltiples veces -->
          <p>
            Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor
            posuere. Praesent id metus massa, ut blandit odio.
          </p>

          <!-- Siga agregando párrafos para crear el efecto de desplazamiento -->
          <p>
            Proin quis tortor orci. Etiam at risus et justo dignissim congue.
            Donec congue lacinia dui, a porttitor lectus condimentum laoreet.
          </p>

          <!-- Más párrafos para extender el desplazamiento -->
          <p>
            Nunc dignissim risus id metus. Cras ornare tristique elit. Vivamus
            vestibulum nulla sit amet tristique reprehenderit.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Actualice el styles.css para mejorar la demostración de desplazamiento:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.long-content {
  background-color: #f9f9f9;
  padding: 20px;
}

/* Los estilos anteriores de posicionamiento fijo permanecen iguales */

Observaciones clave sobre el posicionamiento fijo:

Los elementos fijos permanecen en la misma posición en la pantalla
El desplazamiento no afecta su colocación
Los elementos permanecen visibles independientemente de la posición de desplazamiento de la página

Comportamiento de desplazamiento de ejemplo:

Los anuncios izquierdo, derecho e inferior permanecen estacionarios
El contenido se desplaza detrás de los elementos fijos
Los elementos fijos siempre son visibles en la pantalla

Resumen

En este laboratorio, los participantes aprendieron sobre el posicionamiento fijo en CSS, una técnica de diseño poderosa que permite que los elementos permanezcan estacionarios en la pantalla independientemente del desplazamiento de la página. Al utilizar la propiedad position: fixed, los desarrolladores pueden crear elementos que se mantienen en una ubicación constante, como anuncios laterales o menús de navegación, que permanecen visibles incluso cuando los usuarios desplazan el contenido.

El laboratorio guió a los aprendices a través de la creación de un ejemplo práctico que demuestra el posicionamiento fijo, incluyendo la configuración de una estructura de proyecto HTML y la aplicación de propiedades CSS como top y right para controlar con precisión la colocación de los elementos. Los participantes exploraron las características clave del posicionamiento fijo, como su referencia a la ventana del navegador y su capacidad para mantener una posición constante en la pantalla, brindando una experiencia práctica con esta técnica esencial de diseño CSS.