谁赢了css顶部/底部？ [英] Who wins out of css top/bottom?

问题描述

如果你有一个位于'底部'的div，就像这样：

If you have a div that sits at the 'bottom' like so:

<div id="box" style="position: absolute;width: 10px;height: 10px;bottom: 0px;"></div>

然后如果你要使用'top'来改变头寸......

and then if you were to change the position using 'top'...

$('#box').css({'top':'0px'});

'底部'css命令会发生什么以及决定谁（顶部或底部）获胜？

what happens to the 'bottom' css command and what decides who (top or bottom) wins?

我应该在设置顶部的同时以某种方式取消底部吗？

Should I cancel bottom somehow at the same time as setting top?

创意：

$('#box').css({'top':'0px','bottom','none'});
$('#box').css({'top':'0px','bottom',''});

我之前从未想过

推荐答案

CSS中各种场景中的宽度，高度和盒子偏移之间的相互作用都在第10节。

The interactions between width, height, and box offsets in a variety of scenarios in CSS are all detailed in section 10 of the spec.

由于您的元素绝对定位，请参阅第10.6.4节，其中说：

Since your element is absolutely positioned, refer to section 10.6.4, which says:

对于绝对定位的元素，垂直维度的使用值必须满足此约束：

For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:

'top'+'margin-top'+'border-top-width'+'padding-top'+'height'+'padding-bottom'+'border-bottom-width'+'margin-bottom '+'底部'=包含块的高度

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

如果所有三个'top'，'height'和' bottom'是auto，将'top'设置为静态位置并在下面应用规则3。

If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.

如果这三个都不是'auto'：如果两个'margin' top'和'margin-bottom'是'auto'，在两个边距得到相等值的额外约束下求解方程。如果'margin-top'或'margin-bottom'中的一个是'auto'，则求解该值的等式。如果值过度约束，则忽略'bottom'的值并求解该值。

If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.

在您的情况下，因为设置 top ， top wins的值后，值会过度约束。

In your case, because the values are over-constrained once you set a value for top, top wins.

请注意，设置 none 将无效，因为它不是 bottom 的有效值，并设置空字符串将其恢复为默认值，对于大多数元素（如果不是所有元素）都是 auto ，这不会导致值过度约束。

Note that setting none won't work because it's not a valid value for bottom, and setting the empty string reverts it to its default value which for most if not all elements is auto, which does not result in over-constrained values.

这篇关于谁赢了css顶部/底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！