保证金底部 100% 和保证金顶部 -100% 不起作用答案

【问题标题】：Margin Bottom 100% and Margin Top -100% not working保证金底部 100% 和保证金顶部 -100% 不起作用
【发布时间】：2016-05-14 22:42:23
【问题描述】：

当我使用 margin-top 时，我无法理解为什么我的第三个 div 没有以 -100% 的高度堆叠。我正在使用 Greensock 为 div 的运动设置动画，margin-left 非常适合第一个 div。但是当我尝试将上部 div 向下移动时，它会更高。我知道高度是基于宽度的，但据我所知，如果我使用 100%，那么尺寸是多少并不重要。我先尝试使用 margin-bottom 但它没有用。任何帮助将不胜感激。谢谢你。这是 jsFiddle https://jsfiddle.net/kqyyq78q/

<body>
<a id="overlay"></a>
<div id="start">
<img src="http://imgh.us/roadtest1.svg" id="road" />
</div>
<div id="num1">
<img src="http://imgh.us/roadtest2.svg" id="road" />
</div>
<div id="num2">
<img src="http://imgh.us/roadtest3.svg" id="road" />
</div>
</body>

html,
body {
width: 100%;
height: 100%;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
overflow: hidden;
font-size: 100%;
position: absolute;
}

#overlay {
z-index: 8;
position: fixed;
margin-left: 50%;
padding-top: 20%;
}

#road {
width: 100%;
height: auto;
}

#start {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
}

#num1 {
width: 100%;
height: 100%;
position: fixed;
margin-left: 100%;
}

#num2 {
width: 100%;
height: 100%;
position: fixed;
margin-top: -100%;
}

【问题讨论】：

视觉上你想要的最终状态是什么？可以提供图片吗？
我希望 div 能够像横向移动整个图像一样移动。就像从 div #start 到 #num1 的移动一样，它移动得很顺畅。将#num1 向下推没有问题，只是在尝试从上方向下移动#num2 时出现空白。我只是不明白为什么#num1 和#num2 之间存在差距
这是一个图像示例 s30.postimg.org/m4u6hm9wx/example.jpg 我在从 2 移动到 3 时遇到问题，因为我无法理解为什么会出现空白。

标签： jquery html css margin gsap

【解决方案1】：

发生的情况是您在边距上使用百分比，就好像它们是相对于图像的高度一样。

边距和内边距的百分比是相对于宽度的。这意味着您的margin-top: -100%; 规则将在其宽度不等于其高度时超出标记。另一方面，css 规则top: -100%; 是基于高度的，并且会起作用。

我对您的代码稍作修改以显示a working example of this。

#num2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100%;
}

【讨论】：