CSS 位置 - 顶部 100% 不等于底部 0答案

【问题标题】：CSS Position - top 100% Is Not Equal To bottom 0CSS 位置 - 顶部 100% 不等于底部 0
【发布时间】：2015-01-18 07:40:19
【问题描述】：

当我将fixed 位置分配给css3 动画的元素时，我注意到了这一点，top: 100% 的效果与bottom: 0; 不同。它定位文档之外的元素，而bottom:0; 仍然显示整个元素。

JSFIDDLE DEMO

css位置top:0;的反面是否会自动产生与bottom:0;相同的效果？

【问题讨论】：

与论坛网站不同，我们不使用“谢谢”、“感谢任何帮助”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?。顺便说一句，这是“提前致谢”，而不是“致谢”。
我明白了，先生。

标签： html css css-position

【解决方案1】：

那是因为top的值是以上边缘为参考点，所以需要使用transform: translateY(-100%)来让下边缘为参考点。

.top {
  position: fixed;
  top: 100%;
}
.bottom {
  position: fixed;
  top: 100%;
  transform: translateY(-100%);
}

<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>

【讨论】：

非常感谢。如果框以不同的高度呈现，例如浏览器宽度发生变化，translateY(-100%) 工作正常，但top: -100% 不可靠。

【解决方案2】：

.top{
    position:fixed;
    top: calc(100% - 60px);    
}

等于

.bottom {
    position:fixed;
    bottom:0;    
}

.top{
    position:fixed;
    top: calc(100% - 60px); /*60px the height of the element*/
    right: 0
}

.bottom {
    position:fixed;
    bottom:0;  
    left: 0
}

<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>

或

.top{
    position:fixed;
    top: 100%; 
    margin-top: -60px; /*60px the height of the element*/
    right: 0
}

.bottom {
    position:fixed;
    bottom:0;    
}

<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>

【讨论】：