css - 使用位置为 :absolute - is this acceptable? 的所有四个定位参数

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对于非替换元素(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 个属性都不是 auto，所以上述条件不满足 )

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.

(因为width是auto，上面的条件不满足)

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

(以上条件满足)

所以我们剩下这 6 个:

1. 'left' 和 'width' 是 'auto' 而 'right' 不是 'auto'，那么宽度会收缩以适合。然后求解“左”

2. 'left' 和 'right' 是 'auto' 并且 'width' 不是 'auto'，那么如果建立静态位置包含 block 的元素的 'direction' 属性是 'ltr' set ' left' 设置为静态位置，否则将 'right' 设置为静态位置。然后求解“左”(如果“方向”为“rtl”)或“右”(如果“方向”为“ltr”)。

3. 'width' 和 'right' 是 'auto' 而 'left' 不是 'auto'，则宽度为 shrink-to-fit 。然后求解“对”

4. 'left'是'auto'，'width'和'right'不是'auto'，然后求解'left'

5. 'width'是'auto'，'left'和'right'不是'auto'，然后求解'width'

6. 'right'是'auto'，'left'和'width'不是'auto'，然后求解'right'

根据上面的内容，该元素的宽度是自动的，因此如果您指定左和右，它会解决宽度问题，因此它应该是有效的。

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