css位置绝对，顶部和底部都是

Question

我在div上使用position: absolute;。

fiddle

我的代码是：

.ab {
  background: none repeat scroll 0 0 #FF0000;
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100px;
}

我想知道即使我指定bottom: 0，为什么它仍然在顶部？ 顶部和底部之间是否有任何优先问题？或者是什么原因？

Answer 1

来自Mozilla：https://developer.mozilla.org/en-US/docs/Web/CSS/top

  

如果同时指定top和bottom，则只要height未指定，auto或100%，top和bottom距离将得到尊重。否则，如果height受到任何限制，top属性优先，bottom属性被忽略。

在您的示例中，您已声明了一个集height以及top和bottom位置，因此top位置优先，{忽略{1}}（无论您列出bottom和top的顺序如何。

Answer 2

左上角和左上角优先于底部和右边。

但请注意，您只是看到了这种行为，因为您指定了一个高度。如果您指定top: 0和bottom: 0没有固定高度，则div将使用非静态定位从其第一个祖先的顶部到底部延伸。指定没有高度或宽度的所有四个，它将填充该父项的整个可用区域as you can see in this jsFiddle。

Answer 3

CSS优先于左/右上/下。如果同时提供，则使用top / left而不是bottom / right。

虽然提供两者（如果你有一个明确的高度和宽度），但没有合法的理由。

Answer 4

是top:的优先级高于bottom： 如果您同时使用top和bottom。它将与top给出的值相对应。

Top和Left具有更高的优先级

Answer 5

是。所有浏览器都从页面顶部开始计算坐标。 您有顶级属性和高度属性。首先设置元素的顶部位置，然后是高度，然后是底部位置。

如果删除高度属性 - 您的块从上到下。 （100％身高）;