Question

当我使用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%;
}

Answer 1

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

边距和填充的百分比相对于宽度。这意味着只要宽度不等于其高度，您的margin-top: -100%;规则就会超过标记。另一方面，css规则top: -100%; 基于高度，并且可以正常工作。

我已将您的代码更改为显示a working example of this。

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

保证金下限100％和保证金上限-100％不起作用

1 个答案: