Html “为什么？”；最高：100%&引用；不在“相对”上工作，但如果已设置动画，则会将其考虑在内？

这是一个典型的css布局

.rel {
   background: brown;
   position: relative;
   width: 100px;
   height: 100px;
   top: 100%;
   display: inline-block;
}

我这样做是为了说明相对和绝对如何处理

top:100%

同样，单击第二个红色div，观察它的行为，就好像它100%向下放置一样

这是奇怪还是什么？设置动画时的div为
top:100%考虑在内，但在正常情况下，它什么也不做

编辑

加上

html, body {
   height: 100%;
}

将允许您使用
top:100%.animate（）当元素本身不存在时，考虑顶部？
尝试以下操作：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

在您的示例中，如果希望
顶部
工作，则
主体
/
html
上的高度
相对于窗口的高度需要为100%

html，正文{高度：100%；}

给定当前示例，父元素
body
，具有基于其包含子元素定义的维度。由于子元素的高度为
100px
，这意味着
主体也具有
100px
的高度，因为它们是其中唯一存在的元素。因此，
top:100%
对包含的元素绝对没有影响，因为这些元素决定父元素的维度

为了使
top:100%
起作用，必须直接定义父元素的高度，而不是基于子元素展开。类似于
top:222px
，因为这是顶部的绝对值。但是使用基于
%
的值需要维度，因为0的
100%
也是0。您可以将父级，
body
设置为
height:500px
，这样就可以工作了。但是，如果您希望根据窗口的高度进行设置，则需要
body，html{height:100%}

至于为什么动画本身使用jQuery工作，这是因为基于
px
的值用于移动DOM中的元素，而不是基于百分比的值。因此，这也适用于普通CSS（如上所述）。在动画中查看代码可以演示这一点。如您所见，
px
值用于移动元素。唯一的区别是jQuery进行计算是为了计算出窗口的高度。除此之外，jQuery没有做任何在纯CSS中无法实现的特殊事情。假设使用了
px
值，则可以使用CSS动画执行完全相同的操作。。。但这不再是一个问题，因为您现在知道，要设置父元素的高度，可以使用基于百分比的值来代替。
不确定它应该是什么样子。。但是下面是设置
html，body{height:100%}
后的结果。。嗯，很有趣，我之前在html和正文中添加了这个，但没有任何效果。也许我是在用另一把小提琴，但是，你知道为什么元素在动画中向上滑动，就好像它在底部一样，在
html
/
body
标记上没有高度吗？这是因为高度与父元素相关。在本例中，父对象为body，默认高度为0。设置为100%，将允许孩子们也使用100%的高度，因为之前100%的0是0。。。。至于它以前为什么起作用，我猜元素在一个包含的父元素中，父元素的高度是用一个绝对值定义的。好吧！我将删除这个问题，因为我认为它对将来的使用几乎没有什么重要性。只是我错过了理解css样式是如何工作的。你永远不知道。将来可能会有帮助。这里的大多数问题都是本地化的，但在将来仍然具有相关性。除此之外，你能删除一个有答案的问题吗？我不认为你可以。正如JoshC所说，这将解决未来常规使用的问题，但为什么元素一旦设置动画，就会占据
顶部：100%考虑在内？所以如果我只使用
css
设置动画，它会有同样的效果吗？@JoshC非常感谢，伙计！我忽略了andygoestohollywood的评论，因为它无论如何都不是建设性的，但一旦Mohammad说这是正确的，我就对css动画有了一个想法。@JoshPowell，因为jQuery将这个初始css参数作为参考，然后它在其中大便并执行自己的巫术。这就是为什么它在“动画化”时起作用，因为还有很多事情要做。可能它甚至根本不用“top:100%”。这可能是把它翻译成了
style.top=clientHeight+'px'
@JoshPowell更新后实际回答了这个问题。我甚至没有意识到你在问为什么它在jQuery动画中起作用。除此之外-很高兴这有帮助，这是一个很好的问题。是的，我的问题措辞非常糟糕，所以我删掉了不好的信息。再次感谢诸位给我这么好的回答！它的信息比我想象的要多。