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

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

8 голосов
/ 16 февраля 2011

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

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

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

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

  background-color: #444;

  /* add some opacity here */
}

Ответы [ 3 ]

4 голосов
/ 27 февраля 2011

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

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

(поскольку все 3 свойства не являются автоматическими, вышеуказанное условие не выполнено )

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

(поскольку ширина имеет значение auto, указанное выше условие не выполнено )

В противном случае установите «автоматические» значения для 'margin-left' и 'margin-right' до 0, и выберите один из следующих шести правила, которые применяются.

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

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

  1. 'left' и 'width' - это 'auto', а 'right' - это не 'auto', тогда ширина уменьшается до нужной. Затем решите для «левого» * ​​1035 *

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

  3. 'width' и 'right' - это 'auto', а 'left' не является 'auto', тогда ширина уменьшается до нужной. Тогда решите за «право»

  4. 'left' = 'auto', 'width' и 'right' не являются 'auto', затем решите для 'left'

  5. «ширина» - это «авто», «влево» и «вправо» - не «авто», затем выберите «ширина»

  6. 'right' - это 'auto', 'left' и 'width' - не 'auto', затем выберите 'right'

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

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

2 голосов
/ 27 февраля 2011

Ваше решение не работает с изображениями , iframes и другими замененными элементами .

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

0 голосов
/ 16 февраля 2011

Я думаю, вопрос, который нужно задать, - какая выгода от использования вашего решения по этому вопросу: 

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

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

...