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

Question

Busco 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 le 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

Usted puede estar buscando position: fixed.

cualquier parte, excepto IE6 y muchos dispositivos móviles.

Answer 2

position: fixed;

¿Será 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 desplazándose por el contenido.

Answer 3

Puede hacerlo de esta manera:

#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. - fixed

Answer 4

La forma más sencilla es utilizar 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 está libre de errores/no funciona en iOS y Android navegadores)

Answer 5

el truco :

position:fixed; 

works, pero rompe ciertas opciones .... por ejemplo, un menú desplegable que está etiquetado con una posición fija no se expandirá con la ventana del navegador más ... desearía que haya otra manera de anotar algo en la parte superior/siempre visible

Answer 6

Prueba con esto:

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

Answer 7

Asegúrese de que su contenido se mantiene en un div, Di DivFix.

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

Css:

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

Esperanza, Le ayudará a ..

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

Con el fin de mantener el texto en la misma ubicación que flota sobre una imagen al cambiar el zoom del navegador, que utilizaron este CSS:

position: absolute; 
margin-top: -18% 

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

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