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

Question

我正在使用position: absolute;div.

我的代码是:

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

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

Answer 1

当两个top和bottom被指定,只要height是未指定的,auto或100%,两者top和bottom距离将被遵守.否则,如果height以任何方式受约束,则该top属性优先,并bottom忽略该属性.

在你的榜样,你声明一组height,以及既有top和bottom位置,所以top位置优先,并且bottom被忽略(且不管你列出的顺序top和bottom).

Answer 2

顶部和左侧优先于底部和右侧.

但请注意,您只是看到了这种行为,因为您指定了一个高度.如果你指定top: 0并且bottom: 0没有固定的高度,则div将从其第一个祖先的顶部到底部以非静态定位伸展.指定没有高度或宽度的所有四个,它将填充该父级的整个可用区域,如您在此jsFiddle中所见.

Answer 3

CSS 优先考虑顶部/左侧而不是底部/右侧。如果您同时提供两者，它将使用上/左而不是下/右。

不过，没有合法的理由同时提供两者（如果您有定义的高度和宽度）。