Lecciones
Comenzar
Empezar a aprender
CodeGym /Curso de Java /Frontend SELF ES /Tipos de posicionamiento

Tipos de posicionamiento

Frontend SELF ES
Nivel 21 , Lección 0
Disponible

1.1 Posicionamiento static

El posicionamiento en CSS define cómo se colocan los elementos en una página web. Entender los diferentes tipos de posicionamiento permite crear diseños complejos y dinámicos. Ahora vamos a ver en detalle cada tipo de posicionamiento: static, relative, absolute, fixed y sticky.

static es el valor de posicionamiento por defecto para todos los elementos. Los elementos con este tipo de posicionamiento se colocan en el flujo normal del documento, es decir, se siguen unos a otros en el orden definido por el marcado HTML.

Ejemplo de uso:

CSS
    
      .static-box {
        background-color: #3498db;
        color: white;
        padding: 20px;
        margin: 10px;
      }
HTML
    
      <div class="static-box">Elemento 1</div>
      <div class="static-box">Elemento 2</div>
      <div class="static-box">Elemento 3</div>

Explicación del código:

  • .static-box: elementos con position: static;, que se colocan en el flujo normal del documento uno tras otro

1.2 Posicionamiento relative

relative permite posicionar un elemento relativo a su posición normal en el flujo del documento. El elemento permanece en el flujo normal, pero puede desplazarse mediante las propiedades top, right, bottom y left.

Ejemplo de uso:

CSS
    
      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .relative-box {
        position: relative;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }
HTML
    
      <div>
        <div class="box">Elemento normal</div>
        <div class="box relative-box">Elemento desplazado</div>
        <div class="box">Elemento normal</div>
      </div>

Explicación del código:

  • .relative-box: elemento con position: relative;, que se desplaza 15 píxeles hacia abajo y 15 píxeles a la derecha respecto a su posición normal

1.3 Posicionamiento absolute

absolute permite posicionar un elemento respecto al ancestro más cercano con un posicionamiento diferente de static. Si no existe tal ancestro, el elemento se posiciona respecto al contexto inicial (normalmente es <html>).

Ejemplo de uso:

CSS
    
      .container {
        position: relative;
      }

      .box {
        margin: 5px;
        padding: 20px;
        color: white;
        background-color: #2ecc71;
      }

      .absolute-box {
        position: absolute;
        top: 15px;
        left: 15px;
        color: white;
        background-color: #e74c3c;
      }
HTML
    
      <div class="container">
        <div class="box">Elemento normal</div>
        <div class="box absolute-box">Elemento absolutamente posicionado</div>
        <div class="box">Elemento normal</div>
      </div>

Explicación del código:

  • .container: contenedor con position: relative;, dentro del cual se posiciona un elemento absolute
  • .absolute-box: elemento con position: absolute, que se posiciona respecto al contenedor. Desplazado 15 píxeles hacia abajo y 15 píxeles a la derecha desde la esquina superior izquierda del contenedor.
Java university

1.4 Posicionamiento fixed

fixed permite posicionar un elemento respecto a la ventana del navegador. Este elemento permanece en su lugar al desplazarse por la página.

Ejemplo de uso:

CSS
    
      .container {
        height: 200px;
        overflow: auto;
      }
      .fixed-box {
        position: fixed;
        background-color: #f39c12;
        color: white;
        padding: 20px;
        top: 15px;
        right: 15px;
      }
HTML
    
      <div class="container">
        <div class="fixed-box">Elemento fijo</div>
        Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
        Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
        Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
        Nam ex sem, dignissim ac scelerisque vel, luctus vel orci. Donec sed elit finibus, pretium dolor non, bibendum purus. Morbi in mollis nunc. Nulla finibus enim at iaculis sagittis. Phasellus a dictum purus, in consectetur felis. Aliquam odio turpis, pharetra et interdum quis, fermentum at mi. Vestibulum nec leo mauris. Morbi urna lacus, eleifend vel turpis finibus, ultricies pretium urna. Donec convallis ipsum quis massa porttitor tincidunt et id nibh. Nullam dictum interdum diam, vel mollis tortor. Curabitur lobortis lorem nulla, sed malesuada quam cursus ac. Nulla ac diam enim. Nullam nibh odio, consectetur rutrum egestas nec, elementum at nisl. Pellentesque vitae tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum metus id eros dignissim, vel auctor sem lacinia.
        Donec nisl nisi, luctus ut turpis nec, vestibulum tempor velit. Nullam tristique ut turpis nec congue. Vivamus sed turpis nunc. Nulla vulputate, urna vitae fermentum sollicitudin, eros quam facilisis felis, ac tristique ex mauris maximus quam. Morbi eu laoreet turpis, non semper ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla hendrerit, orci quis aliquam finibus, magna metus dapibus elit, eget rutrum leo nulla non nisi.
        Vivamus id tempor massa, at consectetur nisi. Maecenas magna augue, ultrices vel neque sit amet, porttitor varius tortor. Maecenas consequat neque tristique, cursus eros in, pretium mauris. Quisque eu euismod nunc, a mattis enim. Cras vel sollicitudin arcu, quis suscipit sem. Donec imperdiet nunc sit amet risus feugiat, et fermentum dui venenatis. Mauris quis lectus eu velit scelerisque suscipit eu sit amet sapien. Donec sed sagittis sem, in ultricies nulla. Suspendisse placerat elit sit amet ullamcorper auctor. Aliquam condimentum quis ex id vestibulum. Vivamus erat dolor, tincidunt vitae bibendum nec, euismod a dui. Nullam odio risus, interdum sit amet orci sit amet, porta interdum urna. Aenean at risus nec nulla scelerisque fringilla in ultricies ante.
        Sed malesuada quis massa sed convallis. Praesent non erat vulputate, convallis nunc a, finibus tellus. Proin sit amet turpis a est aliquam scelerisque. Praesent vestibulum enim id odio faucibus, quis sollicitudin tellus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus luctus libero, sed faucibus ante feugiat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce pellentesque lacus magna, sit amet suscipit felis fermentum porta. Pellentesque vulputate vehicula elit, id lacinia nisi aliquet eget. In sed ligula sed nunc dapibus accumsan id ut risus. Integer tristique eros a turpis congue, sit amet condimentum lacus ultricies. Curabitur pulvinar, leo eu elementum lacinia, sapien mauris faucibus libero, ut commodo neque arcu ac nibh. Integer eu sapien convallis, fermentum risus et, euismod odio. Maecenas maximus lectus nec dui facilisis finibus. Duis volutpat, sapien sit amet vehicula convallis, dui lectus finibus risus, faucibus gravida leo quam non eros.
      </div>

Explicación del código:

  • .fixed-box: elemento con position: fixed;, que permanece en su lugar al desplazarse por la página. Está ubicado en la esquina superior derecha de la ventana del navegador

1.5 Posicionamiento sticky

sticky permite que un elemento se comporte como relative hasta que alcance una posición dada al desplazarse, después de lo cual se vuelve fijo (comportamiento de fixed).

Ejemplo de uso:

CSS
    
      .sticky-box {
        position: sticky;
        background-color: #8e44ad;
        color: white;
        padding: 20px;
        top: 0;
      }

      .text {
        margin-top: 15px;
      }

      .content {
        height: 200px;
        background-color: #ecf0f1;
        overflow: auto;
      }
HTML
    
      <div class="content">
        <div class="sticky-box">Elemento Sticky</div>
        <div class="text">
          Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
          Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
          Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
          Nam ex sem, dignissim ac scelerisque vel, luctus vel orci. Donec sed elit finibus, pretium dolor non, bibendum purus. Morbi in mollis nunc. Nulla finibus enim at iaculis sagittis. Phasellus a dictum purus, in consectetur felis. Aliquam odio turpis, pharetra et interdum quis, fermentum at mi. Vestibulum nec leo mauris. Morbi urna lacus, eleifend vel turpis finibus, ultricies pretium urna. Donec convallis ipsum quis massa porttitor tincidunt et id nibh. Nullam dictum interdum diam, vel mollis tortor. Curabitur lobortis lorem nulla, sed malesuada quam cursus ac. Nulla ac diam enim. Nullam nibh odio, consectetur rutrum egestas nec, elementum at nisl. Pellentesque vitae tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam condimentum metus id eros dignissim, vel auctor sem lacinia.
          Donec nisl nisi, luctus ut turpis nec, vestibulum tempor velit. Nullam tristique ut turpis nec congue. Vivamus sed turpis nunc. Nulla vulputate, urna vitae fermentum sollicitudin, eros quam facilisis felis, ac tristique ex mauris maximus quam. Morbi eu laoreet turpis, non semper ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla hendrerit, orci quis aliquam finibus, magna metus dapibus elit, eget rutrum leo nulla non nisi.
          Vivamus id tempor massa, at consectetur nisi. Maecenas magna augue, ultrices vel neque sit amet, porttitor varius tortor. Maecenas consequat neque tristique, cursus eros in, pretium mauris. Quisque eu euismod nunc, a mattis enim. Cras vel sollicitudin arcu, quis suscipit sem. Donec imperdiet nunc sit amet risus feugiat, et fermentum dui venenatis. Mauris quis lectus eu velit scelerisque suscipit eu sit amet sapien. Donec sed sagittis sem, in ultricies nulla. Suspendisse placerat elit sit amet ullamcorper auctor. Aliquam condimentum quis ex id vestibulum. Vivamus erat dolor, tincidunt vitae bibendum nec, euismod a dui. Nullam odio risus, interdum sit amet orci sit amet, porta interdum urna. Aenean at risus nec nulla scelerisque fringilla in ultricies ante.
          Sed malesuada quis massa sed convallis. Praesent non erat vulputate, convallis nunc a, finibus tellus. Proin sit amet turpis a est aliquam scelerisque. Praesent vestibulum enim id odio faucibus, quis sollicitudin tellus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus luctus libero, sed faucibus ante feugiat id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce pellentesque lacus magna, sit amet suscipit felis fermentum porta. Pellentesque vulputate vehicula elit, id lacinia nisi aliquet eget. In sed ligula sed nunc dapibus accumsan id ut risus. Integer tristique eros a turpis congue, sit amet condimentum lacus ultricies. Curabitur pulvinar, leo eu elementum lacinia, sapien mauris faucibus libero, ut commodo neque arcu ac nibh. Integer eu sapien convallis, fermentum risus et, euismod odio. Maecenas maximus lectus nec dui facilisis finibus. Duis volutpat, sapien sit amet vehicula convallis, dui lectus finibus risus, faucibus gravida leo quam non eros.
        </div>
      </div>

Explicación del código:

  • .sticky-box: elemento con position: sticky;, que se comporta como relative hasta que el borde superior alcanza la parte superior de la ventana del navegador. Después de esto, el elemento se fija en esta posición y permanece allí al desplazarse más

1.6 Comparación de tipos de posicionamiento

Comparación de tipos de posicionamiento:

Tipo de posicionamiento Descripción Uso
static Posicionamiento por defecto. Los elementos siguen en el flujo normal del documento. Colocación básica de elementos.
relative Posicionamiento relativo a la posición normal del elemento. Desplazamiento del elemento sin eliminarlo del flujo normal.
absolute Posicionamiento relativo al ancestro más cercano con un posicionamiento diferente de static. Colocación precisa del elemento dentro de un contenedor.
fixed Posicionamiento relativo a la ventana del navegador. Elementos que deben permanecer en su lugar al desplazarse por la página.
sticky Elemento se comporta como relative hasta alcanzar una posición dada, luego se fija. Fijación del elemento al desplazarse.
Comentarios
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION