将所有四个定位参数与position:absolute一起使用-这是可以接受的吗？

发布于 2024-10-17 16:54:26 字数 462 浏览 4 评论 0原文

我提供了这个提供覆盖 CSS 的想法，作为另一个问题。我过去没有想过使用这种类型的语法，但我想不出任何可能与使用它相关的问题。

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

有人可以向我解释为什么它可能不好吗？

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

  background-color: #444;

  /* add some opacity here */
}

原文

I provided this idea for providing overlay CSS, as an answer to another question. I hadn't thought of using this type of syntax in the past but I can't think of any problems that might be associated with using it.

As far as I can tell this works - and if admissible I think it provides an innovative solution - but I don't see it used often.

Could someone explain to me why it might be bad?

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

  background-color: #444;

  /* add some opacity here */
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

习ぎ惯性依靠 2024-10-24 16:54:26

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

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

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

如果三个都不是“auto”：如果
“左边距”和“右边距”
是“auto”，求解下面的方程
两者的额外约束
边距得到相同的值，除非这个
会使它们变得消极，其中
当包含方向的情况
块是'ltr'（'rtl'），设置
'margin-left' ('margin-right') 为零
并解决“边际权利”
（“左边距”）。如果其中之一
'margin-left' 或 'margin-right' 是
'auto'，求解方程
价值。如果值为
过度约束，忽略的值
“左”（如果“方向”
包含块的属性是
'rtl'）或'右'（如果是'方向'
是“ltr”）并求解该值。

（由于宽度是自动的，因此不满足上述条件）

否则，请设置“自动”值
'margin-left' 和 'margin-right' 为 0，
并选择以下六项之一
适用的规则。

（满足上述条件）

所以我们只剩下这6个：

'left'和'width'是'auto'而'right'不是'auto'，那么宽度是收缩以适合的。然后求解'left'
'left' 和 'right' 是 'auto' 并且 'width' 不是 'auto'，那么如果建立静态位置包含块的元素的 'direction' 属性是 'ltr ' 将“left”设置为静态位置，否则将“right”设置为静态位置。然后求解“左”（如果“方向”为“rtl”）或“右”（如果“方向”为“ltr”）。
'width' 和 'right' 是 'auto' 并且 'left' 不是 'auto'，那么宽度是收缩到适合的。然后求解'right'
'left'是'auto'，'width'和'right'不是'auto'，然后求解'left'
'width' 是 'auto'，'left' 和 'right' 不是 'auto'，然后求解 'width'
'right' is ' auto'、'left' 和 'width' 不是 'auto'，则求解 'right'

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

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

The branching is this based the spec for non-replaced elements ( a div is a non-replaced element ):

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.

( since all 3 properties are not auto, the above condition is not met )

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.

( since width is auto, the above condition is not met )

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

( the above condition is met )

And so we're left with these 6:

'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
'left' and 'right' are 'auto' and 'width' is not 'auto', then if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position, otherwise set 'right' to the static position. Then solve for 'left' (if 'direction is 'rtl') or 'right' (if 'direction' is 'ltr').
'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit . Then solve for 'right'
'left' is 'auto', 'width' and 'right' are not 'auto', then solve for 'left'
'width' is 'auto', 'left' and 'right' are not 'auto', then solve for 'width'
'right' is 'auto', 'left' and 'width' are not 'auto', then solve for 'right'

Based on the above the width in that element is auto and so if you specify a left and right it solves for width, so it should be valid.

So while it is completely valid per the CSS2.1/CSS3 spec, it fails to work in IE6. It works in IE7, IE8, Firefox 3 and Chrome.

回复收藏 0 原文

提赋 2024-10-24 16:54:26

您的解决方案不适用于图像、iframe 和其他替换元素。

这是因为 CSS 标准对替换元素施加了不同的尺寸计算机制。（无聊的规范：http://www.w3.org/TR /CSS21/visudet.html#abs-replaced-width)

回复收藏 0 原文

久光 2024-10-24 16:54:26

我想要问的问题是使用您的解决方案有什么好处：

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

哪个更兼容且更易于阅读。虽然您的解决方案是一个更具创新性的解决方案，但通过设置元素的边界来设置元素的宽度/高度似乎是意外的 CSS 行为，并且浏览器的实现将来可能会针对这种情况发生变化。

I guess the question to ask is what benefit is there by using your solution over this:

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

Which is more compatible and easier to read. While yours is a more innovative solution, it seems like unexpected CSS behavior to set an element's width/height by setting its bounds, and browser implementation may change for this case in the future.

回复收藏 0 原文

~没有更多了~