css - CSS底部与顶部结合时不起作用？

我正在尝试为div创建顶部和底部边距，当我仅指定底部边距时，它可以正常工作：

#RightBar{
  display: block;
  position: fixed;
  height: 100%;
  width: 25px;
  bottom: 150px;
  right: 0px;
  background: Aqua;
}

<div id="RightBar"></div>

但是，当我添加顶部边距时，底部边距突然根本不起作用-几乎好像不再读取它了：

#RightBar{
  display: block;
  position: fixed;
  height: 100%;
  width: 25px;
  bottom: 150px;
  top: 25px;
  right: 0px;
  background: Aqua;
}

<div id="RightBar"></div>

关于什么可能导致此的任何想法？

最佳答案

这是因为您还具有height的100%声明，该声明不适合25px top和150px bottom之间。冲突导致其中一个规则被忽略，通常是最早的规则。

删除height以解决此问题。您现在不需要它了，因为可以根据top和bottom自动计算高度：

#RightBar{
  display: block;
  position: fixed;
  width: 25px;
  top: 25px;
  bottom: 150px;
  right: 0px;
  background: Aqua;
}

<div id="RightBar"></div>

关于css - CSS底部与顶部结合时不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43967572/