Usando los cuatro parámetros de posicionamiento con posición: absoluto - ¿es esto aceptable?

Question

Proporcioné esta idea para proporcionar superposición de CSS, como respuesta al another question. No había pensado en usar este tipo de sintaxis en el pasado, pero no puedo pensar en ningún problema que pueda estar asociado con su uso.

Hasta donde puedo decir que esto funciona, y si es admisible, creo que proporciona una solución innovadora, pero no lo veo a menudo.

¿Podría alguien explicarme por qué podría ser malo?

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

    background-color: #444; 

    /* add some opacity here */ 
} 

Answer 1

La ramificación se esta basa la spec para elementos no reemplazados (un div es un elemento no-sustituido):

Si los tres de 'izquierda', " width ', y ' right 'son' auto ': Primero configure ' auto-valores 'para' margin-left 'y ' margin-right 'a 0. Entonces, si ' dirección 'propiedad del elemento establecer la posición estática que contiene el bloque es 'ltr' establecer 'izquierda' a la posición estática y aplique la regla número tres a continuación; de lo contrario, configure 'a la derecha' en la posición estática y aplique la regla número uno a continuación.

(desde las 3 propiedades no son auto, la condición anterior es no cubierto)

Si ninguno de los tres es 'auto': Si 'izquierda margen' tanto y ' margin-right' son 'auto', se resuelve la ecuación bajo la restricción adicional de que los dos márgenes obtienen valores iguales, a menos que esta haría negativo, en el que caso cuando la dirección de la bloque que contiene es 'ltr' ('rtl'), establecer 'margin-left' ('margin-right') a cero y resuelva para 'margin-right' ('margin-left'). Si uno de 'margin-left' o 'margin-right' es 'auto', resuelva la ecuación para ese valor . Si los valores son excesivamente restringidos, ignore el valor 'izquierda' (en caso de que la propiedad 'dirección' del bloque contenedor sea 'rtl') o 'derecha' (en caso 'dirección' es 'ltr ') y resuelve por ese valor.

(desde anchura es auto, la condición anterior se no se reunió)

De lo contrario, los valores establecidos 'auto' para 'margen izquierdo' y 'margin-right' a 0, y elija una de las siguientes seis reglas que correspondan.

(la condición anterior se cumple )

Y así nos quedamos con estos 6:

1. 'izquierda' y 'width' son 'auto' y 'derecha 'no es' automático ', entonces el ancho es contraíble. Luego resuelva para 'izquierda'

2. 'izquierda' y 'derecha' son 'auto' y 'ancho' no 'automático', luego si la propiedad 'dirección' del elemento que establece el bloque que contiene la posición estática es 'ltr' configura 'left' a la posición estática, de lo contrario, ajuste 'right' a la posición estática. Luego resuelve para 'izquierda' (si 'dirección es' rtl ') o' derecha '(si' dirección 'es' ltr ').

3. 'ancho' y 'derecha' son 'automático' e 'izquierdo' no es 'automático', entonces el ancho es contraíble para ajustar. Luego resuelve por 'derecho'

4. 'izquierda' es 'auto', 'width' y no son 'auto' 'correcto', y luego resolver 'izquierda'

5. 'width' es 'auto ',' izquierda 'y' derecha 'no son' auto ', luego resuelve' ancho '

6. ' derecha 'es' auto ',' izquierda 'y' ancho 'no son' auto ', luego resuelve para "derecha"

En función de lo anterior, el ancho en ese elemento es auto a nd así que si especifica una izquierda y una derecha, resuelve el ancho, por lo que debe ser válido.

Por lo tanto, si bien es completamente válida según la especificación CSS2.1/CSS3, no funciona en IE6. Funciona en IE7, IE8, Firefox 3 y Chrome.

Answer 2

supongo que la pregunta es dónde se sitúa, mediante el uso de su solución sobre esto:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100% 
} 

¿Qué es más compatible y fácil de leer. Si bien la suya es una solución más innovadora, parece que el comportamiento de CSS inesperado es establecer el ancho/alto de un elemento al establecer sus límites, y la implementación del navegador puede cambiar para este caso en el futuro.

Answer 3

Su solución does not work with images, iframes y otros replaced elements.

Esto se debe a que el estándar CSS impone un mecanismo de cálculo de dimensión diferente en los elementos reemplazados. (especificaciones aburrido: http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width)