css – 使用位置：绝对的所有四个定位参数 – 这是可以接受的吗？

我提供了这个提供叠加CSS的想法,作为 another question的答案.我过去没想过使用这种语法,但我想不出任何可能与使用它有关的问题.

据我所知,这是有效的 – 如果可以接受,我认为它提供了一种创新的解决方案 – 但我不认为它经常被使用.

有人可以向我解释为什么它可能会很糟糕吗？

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

  background-color: #444;

  /* add some opacity here */
}

解决方法

分支是基于 spec的非替换元素(div是未替换元素)：

If all three of ‘left’,‘width’,and
‘right’ are ‘auto’: First set any
‘auto’ values for ‘margin-left’ and
‘margin-right’ to 0. Then,if the
‘direction’ property of the element
establishing the static-position
containing block is ‘ltr’ set ‘left’
to the static position and apply rule
number three below; otherwise,set
‘right’ to the static position and
apply rule number one below.

(由于所有3个属性都不是自动的,因此不满足上述条件)

If none of the three is ‘auto’: If
both ‘margin-left’ and ‘margin-right’
are ‘auto’,solve the equation under
the extra constraint that the two
margins get equal values,unless this
would make them negative,in which
case when direction of the containing
block is ‘ltr’ (‘rtl’),set
‘margin-left’ (‘margin-right’) to zero
and solve for ‘margin-right’
(‘margin-left’). If one of
‘margin-left’ or ‘margin-right’ is
‘auto’,solve the equation for that
value. If the values are
over-constrained,ignore the value for
‘left’ (in case the ‘direction’
property of the containing block is
‘rtl’) or ‘right’ (in case ‘direction’
is ‘ltr’) and solve for that value.

(因为宽度是自动的,不符合上述条件)

Otherwise,set ‘auto’ values for
‘margin-left’ and ‘margin-right’ to 0,
and pick the one of the following six
rules that applies.

(符合上述条件)

所以我们留下了这6个：

>’left’和’width’是’auto’而’right’不是’auto’,那么宽度是缩小到适合的.然后解决’左’
>’left’和’right’是’auto’而’width’不是’auto’,那么如果构建静态位置包含块的元素的’direction’属性为’ltr’,则将’left’设置为静态位置,否则设置为“正确”到静态位置.然后解决’左'(如果’方向是’rtl’)或’右'(如果’方向’是’ltr’).
>’width’和’right’是’auto’而’left’不是’auto’,然后宽度缩小到适合.然后解决’正确’
>’left’是’auto’,’width’和’right’不是’auto’,然后解决’left’
>’width’是’auto’,’left’和’right’不是’auto’,然后求’width’
>’右’是’自动’,’左’和’宽度’不是’自动’,然后求’右’

基于上面的元素,该元素的宽度是自动的,所以如果你指定左边和右边它解决宽度,所以它应该是有效的.

因此,虽然它根据CSS2.1 / CSS3规范完全有效,但它无法在IE6中工作.它适用于IE7,IE8,Firefox 3和Chrome.