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

I am using position: absolute; on a div.

我使用的位置：绝对;在div上。

小提琴

My code is:

我的代码是：

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

I want to know why is it on top even if I specified bottom: 0? Is there any priority issue between top and bottom ? Or what is the reason?

我想知道为什么即使我指定底部也是最重要的：0？顶部和底部之间是否有任何优先问题？或者是什么原因？

5 个解决方案

#1

From Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/top

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

When both top and bottom are specified, as long as height is unspecified, auto, or 100%, both top and bottom distances will be respected. Otherwise, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.

如果指定了顶部和底部，只要未指定高度，自动或100％，顶部和底部距离都将得到遵守。否则，如果以任何方式约束高度，则top属性优先，bottom属性被忽略。

In your example, you've declared a set height as well as both a top and bottom position, so the top position takes precedence, and the bottom is ignored (and regardless of the order you list top and bottom).

在您的示例中，您已经声明了设置高度以及顶部和底部位置，因此顶部位置优先，底部被忽略（无论您在顶部和底部列出的顺序如何）。

#2

Top and left take priority over bottom and right.

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

But note that you're only seeing this behavior because you specified a height. If you had specified top: 0 and bottom: 0 without a fixed height, then the div would stretch from top to bottom of its first ancestor with non-static positioning. Specify all four without height or width, and it will fill the whole available area of that parent, as you can see in this jsFiddle.

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

#3

CSS prioritises top/left over bottom/right. If you provide both, it will use top/left instead of bottom/right.

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

There's no legitimate case for providing both (if you have a defined height and width) though.

然而，提供两者（如果你有一个明确的高度和宽度）没有合法的情况。

#4

Yes top: has higher priority than bottom: if you are using both top and bottom. It will allign to the value given by top.

是顶部：优先级高于底部：如果您同时使用顶部和底部。它将与top给出的值相符。

Top and Left has more priority

顶部和左侧具有更高的优先级

#5

Yes. All browsers start counting coordinate from top of the page. You have a top property and height property. First set the top position of the element then his height and then bottom position.

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

If you remove height property - your block be from top to bottom. (100% height);

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

#1