¿Cómo hacer un div fijo?

Estoy tratando de hacer que el cuadro se fije en el borde inferior derecho de la página y no se mueve con la página se desplaza hacia abajo. Pero no está funcionando para mí, no sé por qué. Aquí está mi código:¿Cómo hacer un div fijo?

<html> 
<head> 

<style type="text/css"> 

.tooltip { 
width: 200px; 
position: fixed; 
top:auto; 
bottom:0px; 
right:0px; 
left:auto; 
} 
</style> 
</head> 
<body> 
<div class="tooltip"> 
    <div class="tooltip_top">1</div> 
    <div class="tooltip_con">2</div> 
    <div class="tooltip_bot">3</div> 
</div> 
</body> 
</html>

Fuente

2010-01-27 taabouzeid

funciona bien conmigo. Incluso si los valores automáticos para arriba y para la izquierda no son obligatorios. ¿Cuál es el problema? ¿Qué navegador usas para probar? – gregseth

Funciona bien en FF y Chrome ..

mayores versiones de IE no apoyaron position:fixed correctamente .. no está seguro acerca versión más reciente ..

También asegúrese usted tiene un tipo de documento definido ..

Fuente

2010-01-27 23:19:59

Funcionó solo después de agregar el tipo de documento. Gracias :) – taabouzeid

Huh, debería funcionar. Tal vez eliminar top: auto?

(No funcionará en IE 6, aunque, como IE 6 no soporta position: fixed.

Fuente

2010-01-27 23:21:23

parece estar funcionando para mí .... Creo en Internet Explorer 7 y una mayor tendrá que definir una tipo de documento, busque "modo de peculiaridades" si usted no sabe por dónde empezar en ese

no creo IE6 apoya la posición:... fijo

Fuente

2010-01-27 23:23:08 dpb

Está en lo correcto, señor, el uso de posicionamiento absoluto funciona si quiere guardar algunos bytes. –

su hTML/CSS solamente se rompe en IE Cambio de position: fixed; a position: absolute; y debería funcionar más como usted lo desee.

También puede aplicar el elemento de tipo de documento:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Fuente

2010-01-27 23:24:39

Sí, dos cosas que se encargan de

Escriba el DOCTYPE pero la transición!
la propiedad CSS de "posición: fija" no es compatible con IE6 ... por lo que sería mejor usar "posición: absoluto" ... con todas las demás propiedades manteniendo igual.

Fuente

2011-10-06 20:04:27 Devanand

que todas las respuestas tienen "grandes códigos" Por qué simplemente no añadir "fijo" para div elemento De esta manera:

div position: fixed;

Y que "es todo: D espero que funcione para usted

Fuente

2013-01-08 17:54:53 user1959021

<html> 
<head> 
<style type="text/css"> 
.header { 
width: 100%; 
height:100px; 
position: fixed; 
top:0px; 
left:0px; 
} 
</style> 
</head> 
<body> 
<div class="tooltip"> 
    <div class="tooltip_top">1</div> 
    <div class="tooltip_con">2</div> 
    <div class="tooltip_bot">3</div> 
</div> 
</body> 
</html>

Fuente

2015-02-18 05:11:02

cualquier cuestión relacionada con la posición a continuación, ver este enlace usted tiene conseguir soluciones rápidas.

http://learnlayout.com/position.html

Fixed

un elemento fijo está colocado con relación a la ventana, lo que significa que siempre permanece en el mismo lugar, incluso si la página se desplaza. Al igual que con relativa, se usan las propiedades superior, derecha, inferior e izquierda.

Estoy seguro de que ha notado ese elemento fijo en la esquina inferior derecha de la página. Te estoy dando permiso para prestarle atención ahora.Aquí está el CSS que pone ahí:

.fixed { 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    width: 200px; 
    background-color: white; 
}

relativa

relativa comporta de la misma manera estática a menos que agregue algunas propiedades adicionales.

.relative1 { 
    position: relative; 
} 
.relative2 { 
    position: relative; 
    top: -20px; 
    left: 20px; 
    background-color: white; 
    width: 500px; 
}

absoluta

absoluta es el valor de posición más delicada. absolute se comporta como fijo excepto en relación con el antecesor posicionado más cercano en lugar de relativo a la ventana gráfica. Si un elemento completamente posicionado no tiene antepasados posicionados, utiliza el cuerpo del documento y se mueve junto con el desplazamiento de página. Recuerde, un elemento "posicionado" es aquel cuya posición no es estática.

Aquí está un ejemplo sencillo:

.relative { 
    position: relative; 
    width: 600px; 
    height: 400px; 
} 
.absolute { 
    position: absolute; 
    top: 120px; 
    right: 0; 
    width: 300px; 
    height: 200px; 
}

Fuente

2015-02-18 05:16:05

Respuesta

Cuestiones relacionadas