如果你有一个div坐在“底部”,就像这样:
<div id="box" style="position: absolute;width: 10px;height: 10px;bottom: 0px;"></div>
如果你要用“顶”来改变位置。。。
$('#box').css({'top':'0px'});
“bottom”css命令会发生什么情况?决定谁(top或bottom)获胜的是什么?
我应该在设置顶部的同时取消底部吗?
思想:
$('#box').css({'top':'0px','bottom','none'});
$('#box').css({'top':'0px','bottom',''});
我以前从没想过
最佳答案
CSS中各种场景中的宽度、高度和框偏移之间的交互在规范的section 10中都有详细说明。
由于您的元素是绝对定位的,请参考section 10.6.4,它表示:
对于绝对定位的元素,使用的垂直尺寸值必须满足以下约束:
'top'+'margin top'+'border top width'+'padding top'+'height'+'padding bottom'+'border bottom width'+'margin bottom'+'bottom'=包含块的高度
如果“top”、“height”和“bottom”三个都是自动的,则将“top”设置为静态位置并应用下面的规则3。
如果三个参数都不是“auto”:如果“margin top”和“margin bottom”都是“auto”,则在两个margin得到相等值的额外约束下求解方程。如果“margin top”或“margin bottom”中的一个是“auto”,请求解该值的方程。如果值被过度约束,则忽略“bottom”的值并求解该值。
在你的例子中,因为一旦你为top
设置了一个值,top
就赢了。
请注意,设置none
将不起作用,因为它不是bottom
的有效值,并且设置空字符串会将其还原为默认值,对于大多数(如果不是所有)元素来说,默认值都是auto
,这不会导致值过多约束。
关于jquery - 谁从CSS顶部/底部中获胜?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23856233/