Posiciones en Quickly

Configura la disposición de tus elementos con precisión con Quickly usando nuestras clases de posicionamiento. Controla la ubicación con fixed, sticky, relative y absolute y obten un control total de la distribución de los elementos.

Posicionamiento Fijo

Estas reglas te permiten mantener elementos en una posición específica en la ventana del navegador, sin importar el desplazamiento de la página.

.fixed

Clase normal Clase móvil Descripción
.unfixed-m Undo-Fixed-Mobile. Está diseñada para anular cualquier regla CSS previa que establezca la posición de un elemento como fixed.
.fixed Fixed. Fija el elemento en la ventana, asegurando que siempre esté visible sin importar cómo se desplace la página.
.fixed-t Fixed-Top. Fija el elemento en la parte superior de la ventana, asegurando que siempre esté visible sin importar cómo se desplace la página.
.fixed-b Fixed-Bottom. Coloca el elemento en la parte inferior de la ventana, manteniéndolo siempre visible en la parte baja de la pantalla.
.fixed-lb Fixed-LeftBottom. Fija el elemento en la esquina inferior izquierda, perfecto para menús o botones de acceso rápido.
.fixed-lt Fixed-LeftTop. Coloca el elemento en la esquina superior izquierda, ideal para encabezados o logotipos que deben estar siempre visibles.
.fixed-rb Fixed-RigthBottom. Sitúa el elemento en la esquina inferior derecha, útil para elementos de acción o notificaciones.
.fixed-rt Fixed-RightTop. Fija el elemento en la esquina superior derecha, excelente para barras de herramientas o botones de perfil.
HTML 
                                    
    <body>    
        <div class="fixed">fixed</div>             
        <div class="fixed-t unfixed-m">fixed-t Unfixed-m</div> 
        <div class="fixed-b">fixed-b</div>     
        <div class="fixed-lb">fixed-lb</div>   
        <div class="fixed-lt">fixed-lt</div> 
        <div class="fixed-rb">fixed-rb</div> 
        <div class="fixed-rt">fixed-rt</div>                                  
    </body>

Posicionamiento Pegajoso

Estas reglas permiten que un elemento se "pegue" a una posición específica dentro de su contenedor al desplazarse, ofreciendo una experiencia de usuario interactiva y dinámica.

.sticky

Clase normal Clase móvil Descripción
.unsticky-m Undo-Sticky-Mobil. Está diseñada para anular cualquier regla CSS previa que establezca la posición de un elemento como Sticky.
.sticky-t Sticky-Top. Mantiene el elemento pegado en la parte superior de su contenedor cuando se desplaza hacia él, ideal para barras de navegación o encabezados de secciones.
.sticky-b Sticky-Bottom. Fija el elemento en la parte inferior de su contenedor, manteniéndolo visible mientras se desplaza hacia él, perfecto para notas de pie de página o acciones persistentes.
HTML 
                                    
    <body>               
        <div class="sticky-t">fixed-t</div> 
        <div class="sticky-b">fixed-b</div>                                  
    </body>

Posicionamiento Relativo y Absoluto

Optimiza tu diseño web con las clases relative y absolute. Usa .relative para ajustes sutiles sin alterar el flujo, y .absolute para un control total sobre la ubicación de los elementos.

Clase Descripción
.relative Permite posicionar un elemento en relación con su posición original en el flujo del documento. Esto significa que puedes moverlo desde su lugar de partida sin afectar el flujo de otros elementos en la página.
.absolute Permite posicionar un elemento en relación con el contenedor más cercano que tenga una posición distinta de static (o con el área visible del navegador si no hay tal contenedor). Esto proporciona un control total sobre la ubicación exacta del elemento en la página.
HTML 
                                    
    <body>               
        <div class="relative">relative</div> 
        <div class="absolute">absolute</div>                                  
    </body>