Crear Div flotante en HTML con CSS - Curso de CSS

En esta ocasión lograremos hacer que un DIV o elemento HTML permanezca por encima de toda la página sin afectar la posición de los demás. Además, seleccionaremos si queremos permanecerlo en un lugar a pesar de que el usuario navegue verticalmente por la página, o si a pesar de ello, el elemento se mueva junto el movimiento.

Para iniciar, tu decidirás si asignarle el estilo a tu elemento por medio de un apartado especifico para ello o en mi caso, asignar el estilo directamente en las etiquetas de los elementos y es que a pesar de no ser algo estéticamente agradable para el desarrollador, la verdad es que es algo rápido de aplicar y es por ello que lo haremos en este ejemplo.

Primero creamos nuestro elemento, para ello en nuestro caso crearemos 2 <div>, uno dentro de otro para posteriormente permitir centrar el elemento principal. Si no te interesa tener en el centro horizontalmente tu elemento a fijar, entonces solo crea tu elemento que te interesa para mantenerlo a flote.

<div> <div> Contenido de Nuestro Elemento </div> </div>

Ahora en el div padre colocamos las siguientes propiedades de estilo de manera que se cree el efecto flotante. Nuevamente si no te interesa centrar el elemento que te interesa mantener a flote entonces aplicalo directamente al elemento de tu interés.

<div style="background-color:transparent; position:fixed; top:200px; left:0; width:100%; heigth:auto; z-index:5;"> <div> </div> </div> // DONDE: // BACKGROUND-COLOR: TRANSPARENT; Indica que el elemto no será visible, siendo solo un elemento para guíar al elemento hijo. // POSITION: FIXED; Se refiere que el objeto se mantendra en la posicion a pesar de que el usuario navegue por la página. SI SE DECEA que el objeto se mantenga en una posición flotando a pesar de que el usuario navegue por la página entonces cambiar el valor por ABSOLUTE; // WIDTH: 100%; Al ser centrado, entonces debemos declarar que el DIV padre debe tener un ancho del 100% para despues declarar en el DIV hijo o elemento de nuestro interés que esté al centro del DIV padre. // TOP: 200px; Declaramos que el objeto estará separado a 200 píxeles de la parte superior de la página // Z-INDEX: 5; Evita que un objeto se superponga, demanera que el elemtno este por encima de los demás:

Ahora declaramos las propiedades del elemento hijo, el cual es el elemento que nos interesa para mantener flotando sobre los demás.

<div style="background-color:transparent; position:fixed; top:200px; left:0; width:100%; heigth:auto; z-index:5;"> <div style="display:block; margin: auto;"> EL ESTILO DE TU ELEMENTO COMO COLOR DE FONDO Y BORDES YA SON ALGO QUE DEBES CONFIGURAR POR TU CUENTA, AQUI SOLO SE MUESTRA COMO LOGRAR QUE EL ELEMENTO FLOTE </div> </div> // DONDE: // DISPLAY: BLOCK; Entre lo que esta propiedad logra, permite el correcto funcionamiento de la siguiente propiedad; // MARGIN: AUTO; Indica que el elemento será centrado acorde al ancho que le hayas asignado.

Como logramos observar, basta con que asignemos la propiedad Position: Fixed o Absolute para que el elemento deseado flote, obviamente agregando las demás propiedades que deseemos de manera que elemento tenga un buen estilo visual.