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

Question

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

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

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

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

  background-color: #444;

  /* add some opacity here */
} 

Answer 1

分支是基于非替换元素的规范（div 是非替换元素）：

如果 'left'、'width' 和 'right' 三个均为 'auto'：首先将 'margin-left' 和 'margin-right' 的任何 'auto' 值设置为 0。然后，如果 'direction'建立静态位置包含块的元素的属性是“ltr”，将“left”设置为静态位置并应用下面的规则三；否则，将“右”设置为静态位置并应用下面的第一条规则。

（由于所有3个属性都不是auto，因此不满足上述条件）

如果这三个都不是“auto”：如果“margin-left”和“margin-right”都是“auto”，则在两个边距获得相等值的额外约束下求解方程，除非这会使它们为负值，在这种情况下，当包含块的方向为“ltr”（“rtl”）时，将“margin-left”（“margin-right”）设置为零并求解“margin-right”（“margin-left”）。如果“margin-left”或“margin-right”之一为“auto”，请求解该值的方程。如果值过度约束，则忽略“left”（如果包含块的“direction”属性为“rtl”）或“right”（如果“direction”为“ltr”）的值并求解那个值。

（由于宽度为auto，所以不满足上述条件）

否则，将“margin-left”和“margin-right”的“auto”值设置为 0，并选择以下适用的六个规则之一。

（满足上述条件）

所以我们剩下这 6 个：

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

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

3. 'width' 和 'right' 是 'auto' 且 'left' 不是 'auto'，那么宽度是收缩到适合的。然后解决“正确”

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。