CSS código:CSS: la resolución de problemas de la pantalla absoluta
top:45;
left:98;
float:right;
position:absolute;z-index:2;
he hecho la codificación de arriba para una flota div cuando estaba trabajando en 1024, pero cuando probé el mismo en una resolución diferente que está fuera de alineación.
¿Cómo podemos arreglarlo?
Los elementos posicionados de forma absoluta se posicionan de acuerdo con un antecesor relativamente posicionado o la ventana. Suena como en tu caso, está siendo posicionado en la ventana.
La manera de arreglar esto es poner su <div> absolutamente posicionado dentro de un contenedor relativo. De esa manera, ya que el tamaño de la ventana cambia, permanecerá en el lugar correcto:
<div style="position: relative">
<div style="position: absolute; left: 98px; top: 45px;">
This div will always be 98px from the left and 45px from the top of its parent .
</div>
</div>
En lugar de píxel, utilice %. Puede ayudarte a producir la salida.
Lo he intentado, pero está dando el mismo problema. – dave
Suponiendo que el elemento no está dentro de otro elemento con una posición relativa, el elemento que está colocando debe estar en la misma posición independientemente de la resolución.
asegúrese de usar:
top: 45px
left: 98px
Se dejó la declaración de píxeles fuera de su código de seguridad.
Además, flotante: no es necesario en el elemento posicionado, ya que position: absolute lo sacará del flujo normal del documento de todos modos.
Ninguna de las soluciones anteriores funciona para mí ... mantenerlo en posición absoluta y dar margin-top, margin-left ... en % de edad me gusta;
margin-top:10%;
margin-left:5%;
que se automáticamente ajustar w.r.t. resolución de pantalla ...
esto funcionó perfecto para mí. probado en diferentes resoluciones.
¡diviértase!
Esto no funcionó para mí. Tengo un solo div Estoy intentando posicionarme absolutamente mientras le permite reaccionar al redimensionamiento de la ventana. – ILikeTurtles
@ Aaron, ¿qué problema estás enfrentando puedes reproducirlo en jsfiddle.net? –
Probaré esto :) – dave
Sí, tu solución funcionó. Gracias – dave