css绝对位置，顶部和底部都有答案

【问题标题】：css position absolute with top and bottom bothcss绝对位置，顶部和底部都有
【发布时间】：2016-12-05 14:50:26
【问题描述】：

我在 div 上使用position: absolute;。

我的代码是：

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

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

【问题讨论】：

去掉你的top:0，它会在底部！

标签： html css css-position

【解决方案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 位置优先，bottom 被忽略（并且无论您列出的顺序 top 和 bottom)。

【讨论】：

【解决方案2】：

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

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

【讨论】：

jsFiddle 演示是否也适用于position: relative？它没有，我似乎无法理解为什么。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

CSS 将顶部/左侧优先于底部/右侧。如果两者都提供，它将使用顶部/左侧而不是底部/右侧。

不过，提供两者（如果您有定义的高度和宽度）是不合理的。

【讨论】：

【解决方案5】：

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

Top 和 Left 具有更高的优先级

【讨论】：