Ejemplo de aplicación estilos para el posicionado de elementos

Como se ha visto, cada elemento se puede rodear por bordes entre el relleno y el margen. La propiedad principal que hace que se muestre un borde alrededor de un objeto es border-style.

• static: el elemento se posiciona siguiendo el flujo normal de la página y no se afecta por top, bottom, left y right.
• relative: el elemento se posiciona según su posición original. Si se le asigna valor a top, bottom, left y right se desplazará según se indique. Los demás elementos no ocuparán el espacio dejado por él.
• fixed: el elemento se posiciona según la ventana del navegador, por lo que siempre se encontrará en el mismo lugar aunque la página se le haga scroll. Con top, bottom, left y right se desplazará según se indique. Un elemento fijo no deja ningún hueco en el lugar que él hubiera estado normalmente colocado.
• absolute: el elemento se posiciona de manera relativa al ancestro más próximo POSICIONADO, si no hay, usa el cuerpo del documento y se mueve con el scroll de la página. Si se le asigna valor a top, bottom, left y right se desplazará según se indique. Los demás elementos ocuparán el espacio dejado por él.
• sticky: el elemento se posiciona según el scroll del usuario. Estos elementos alternan entre relative y fixed en función de la posición del scroll. Si se le asigna valor a top, bottom, left y right se desplazará según se indique.

.fijo{
  position: fixed;
  bottom:0px;
  right: 0px;
  padding: 10px;
  background-color: lightblue;
  border: 2px solid red;                   
}
                    

Elemento pegajoso

           .pegajoso{
                position:sticky;
                top: 25px;
                left: 25px;
                max-width: 250px;
                padding: 10px;


            }
            .pegajoso *{
                padding: 5px;
                background-color: lightsalmon;
                border: 2px solid red; 
            }
                

            div{
                width: 80%;
                display: inline-block;
                margin-bottom: 10px;

            }  
            .row{
                position: relative;
                padding: 50px 0px;
            }

            .fijo{
                position: fixed;
                bottom:0px;
                right: 0px;
                max-width: 250px;
                padding: 10px;
                background-color: lightblue;
                border: 2px solid red;                   

            }
            .estatico{
                position: static;
                top: 25px;
                left: 25px;
                max-width: 250px;
                padding: 10px;
                background-color: lightblue;
                border: 2px solid red;     
            }
            .relativo{
                position: relative;
                top: 25px;
                left: 25px;
                max-width: 250px;
                padding: 10px;
                background-color: lightcoral;
                border: 2px solid red;
            }
            .relativo-z{
                position: relative;
                top: 25px;
                left: 25px;
                max-width: 250px;
                padding: 10px;
                background-color: lightcoral;
                border: 2px solid red;  
                z-index: -1;
            }
            .absoluto{
                position: absolute;
                top: 25px;
                left: 25px;
                max-width: 250px;
                padding: 10px;
                background-color: lightgreen;
                border: 2px solid red;     
            }