CSS 位置 - 前 100% 不等于后 0

Question

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

是否有css位置top:0;的相反位置自动给出与bottom:0;相同的效果？

Answer 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>

Answer 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>

CSS 位置 - 前 100% 不等于后 0

CSS Position - top 100% Is Not Equal To bottom 0

html

css

css-position