style - link css to html

CSS para mantener el elemento en la posición "fija" en la pantalla

Question

Estoy buscando un truco para crear un objeto HTML "fijo" en la pantalla del navegador usando CSS. Quiero que permanezca en la misma posición todo el tiempo, incluso cuando el usuario se desplaza por el documento. No estoy seguro de cuál es el término adecuado para esto.

Sería como el botón de chat en Facebook o el botón Comentarios que se encuentra en algunos sitios web que lo siguen a lo largo de la página.

En mi situación, quiero mantener un div en la esquina inferior derecha absoluta de la pantalla en todo momento. Ejemplo de CSS apreciado.

Answer 1

Asegúrate de que tu contenido se mantenga en un div, Say divfix.

<div id="divfix">Your Code goes here</div>

Css:

#divfix {
       bottom: 0;
       right: 0;
       position: fixed;
       z-index: 3000;
        }

Espero que te ayude..

Answer 2

El ajuste:

position:fixed; 

funciona, pero rompe ciertas opciones ... por ejemplo, un menú desplegable etiquetado con una posición fija ya no se expandirá con la ventana del navegador ... desearía que hubiera otra forma de anclar algo en la parte superior / siempre visible

Answer 3

La forma más fácil es usar la position: fixed :

.element {
  position: fixed;
  bottom: 0;
  right: 0;
}

http://www.w3.org/TR/CSS21/visuren.html#choose-position

(tenga en cuenta que la posición fija tiene errores / no funciona en ios y navegadores Android)

Answer 4

Para mantener el texto flotante en la misma ubicación sobre una imagen al cambiar el zoom del navegador, utilicé este CSS:

position: absolute;
margin-top: -18%

Creo que el% en lugar de píxeles fijos es lo que hace. ¡Aclamaciones!

Answer 5

Prueba este:

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Answer 6

Puedes hacerlo así:

#mydiv {
    position: fixed; 
    height: 30px; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

Esto creará un div, que se fijará en la parte superior de la pantalla. - arreglado

Answer 7

position: fixed;

Hará que esto suceda.

Se maneja como position:absolute; con la excepción de que se desplazará con la ventana a medida que el usuario vaya desplazando el contenido.

Answer 8

HTML

<div id="fixedbtn"><button type="button" value="Delete"></button></div>

CSS

#fixedbtn{
 position: fixed;
 margin: 0px 10px 0px 10px;
 width: 10%;
}

Answer 9

Usted puede estar buscando una position: fixed .

Funciona en todas partes excepto IE6 y muchos dispositivos móviles.

Answer 10

position: sticky;

El elemento adhesivo se pega en la parte superior de la página (arriba: 0) cuando alcanza su posición de desplazamiento.

Ver ejemplo: https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky