html - site - ¿Cómo poner la posición css max-left o min-left al objeto absoluto?

html official site

Question

Tengo un elemento con:

position:absolute;
left: 70%;

¿Puedo configurar un elemento, por ejemplo, para no mover desde la izquierda más de 900 px? ¿Algo así como el ancho máximo pero para posicionar?

Answer 1

Alternativamente, podría envolver el elemento absolutamente posicionado con un elemento relativamente posicionado que tenga un ancho mínimo.

Answer 2

La única forma de hacer esto con CSS es eliminar el posicionamiento absoluto y flotarlo a la derecha.

Ponga un div "empujador" vacío, flotó a la izquierda. Dale un ancho del 70% y un ancho mínimo de 900 px; Luego flota tu elemento a su lado.

De lo contrario tendrás que usar Javascript.

Answer 3

Puedes usar CSS3 Media Queries para lograrlo.

Asi que:

#element {
  position:absolute;
  left: 70%;
}

Si no desea superponer un objeto cuando tiene una pantalla más pequeña o cambiar el tamaño de la ventana, puede agregar después de eso:

@media all and (max-width: 980px) {
    #element{
        margin-left: 0px;
        left: 220px;
    }
}

Cuando el ancho de la pantalla es inferior a 980 píxeles, el objeto #elemento se fijará a 220 píxeles .