CSS位置-前100％不等于前0 [英] CSS Position - top 100% Is Not Equal To bottom 0

问题描述

当我为CSS3动画的元素分配 fixed 位置时，我注意到了这一点， top:100％的效果与 bottom相同:0; .它位于文档之外的元素中，而 bottom:0; 仍显示整个元素.

I noticed this when I assign fixed position to an element for css3 animation, that top: 100% isn't gave the same effect as bottom: 0;. It's locate the element outside of document, while bottom:0; is still showing the whole of the element.

JSFIDDLE DEMO

JSFIDDLE DEMO

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

Is there an opposite of css position top:0; that is automatically give the same effect as bottom:0;?

推荐答案

这是因为 top 值将顶部边缘作为参考点，因此需要使用 transform:translateY(-100％)将底边作为参考点.

That is because top value takes the top edge as a reference point, you need to use transform: translateY(-100%) to make the bottom edge a reference point.

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

这篇关于CSS位置-前100％不等于前0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！