Использование всех четырех параметров позиционирования с положением: абсолютное - это приемлемо?

Question

Я представил эту идею для предоставления наложения CSS, как ответ на вопрос another question. Я не думал использовать этот тип синтаксиса в прошлом, но я не могу думать о каких-либо проблемах, которые могут быть связаны с его использованием.

Насколько я могу судить об этом, - и, если допустимо, я думаю, что он предлагает инновационное решение, но я не вижу его часто используемым.

Может ли кто-нибудь объяснить мне, почему это может быть плохо?

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

    background-color: #444; 

    /* add some opacity here */ 
} 

Answer 1

Разветвление это основаны на spec для незамещаемых элементов (A DIV не является заменяемым элементом):

Если все три «влево», " width 'и ' right 'are' auto ': сначала установите ' auto 'для' margin-left 'и ' margin-right 'to 0. Тогда, если свойство ' direction 'элемента установление статического положения , содержащий блок, 'ltr' set 'left' к статическому положению и применить правило номер три ниже; в противном случае установите 'right' в статическую позицию и примените правило №1 ниже.

(так как все 3 свойства не автоматически, сформулированное условие не встретил)

Если ни один из этих трех не «Авто»: Если как «запас левый» и " маржа правого» является„авто“, уравнение решается дополнительное ограничение, что два поля получить одинаковые значения, если это бы сделать их отрицательными, в котором случая, когда направление вмещающего блока является„л“ ('rtl'), set «margin-left» («margin-right») до нуля и решить для «margin-right» («margin-left»). Если один из «margin-left» или «margin-right» равен «auto», решите уравнение для этого значения . Если значения с избыточным ограничением, игнорируйте значение для «влево» (в случае, если свойство «direction» содержит блок 'rtl') или 'right' (в случае, если 'direction' is 'ltr ') и решить эту ценность.

(с шириной авто, вышеуказанное условие не встретило)

В противном случае, установите 'Auto' значение 'маржи налево' и 'Правое поле' 0, и выберите один из следующих правил: .

(вышеуказанное условие выполнено )

И так мы остались с ними 6:

1. 'левый' и 'ширина' являются 'авто' и «вправо 'не' auto ', тогда ширина сжимается до упора. Затем разрешите для «left»

2. «left» и «right» are 'auto' и 'width' не 'auto', тогда если свойство 'direction' элемента, устанавливающего блок, содержащий статическую позицию, 'ltr' установите 'left' в статическую позицию, иначе установите «right» в статическую позицию. Затем решите для «left» (если «direction is« rtl ») или« right »(если« direction »is 'ltr').

3. «ширина» и «право» являются «авто» и «слева» не являются «авто», а ширина сжимается до упора. Затем решить для «права»

4. «левый» есть «авто», «ширина» и «право» не «Авто», а затем решить для «левых»

5. «ширина» является «авто ',' left 'и' right 'не являются «авто», затем решаются для «width»

6. «right» is' auto ',' left 'и' width 'не являются' auto ', а затем разрешают для «права»

На основании вышеизложенного ширина в этом элементе является автоматической поэтому, если вы укажете левый и правый, он решает для ширины, поэтому он должен быть действительным.

Так что, хотя он полностью соответствует спецификации CSS2.1/CSS3, он не работает в IE6. Он работает в IE7, IE8, Firefox 3 и Chrome.

Answer 2

Я думаю, вопрос, чтобы спросить, что польза есть, используя свое решение по этому поводу:

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

Что является более совместимым и легче читать. Хотя ваше более инновационное решение, кажется, что неожиданное поведение CSS задает ширину/высоту элемента, задавая его границы, и реализация браузера может измениться для этого случая в будущем.

Answer 3

Ваше решение does not work with images, iframe и другие replaced elements.

Это связано с тем, что стандарт CSS накладывает на заменяемые элементы другой механизм расчета размеров. (расточные спецификации: http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-width)