margin-top百分比未按预期工作

Question

我知道你在想什么，但父容器都是用像素定位的。

我有一个高度和宽度以像素为单位的div，在div中我有一个youtube iframe（对于此示例）它的百分比为margin-top。

这是HTML：

这就是结果：

我知道这是一个可笑的小框架（所选div的右下角）但它只是一个例子：）

正如您所看到的，在代码中我将margin-top设置为99%但实际上定位较低。可能是什么原因造成的？

Answer 1

关键是顶部/底部margin / padding属性的百分比值是相对于包含框的宽度。它不尊重父元素的高度。

  

<强> 8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'

     

<percentage>百分比是根据宽度计算的   生成的框的包含块。请注意，这是真的   margin-top和margin-bottom也是absolute。如果包含块的话   width取决于此元素，然后生成的布局未定义   在CSS 2.1中。

当您使用{{1}}定位时，请尝试使用top: 99%，而百分比值指的是包含框的高度

Answer 2

基于百分比的保证金最高值不会起作用，因为它是根据包含元素的宽度计算的，如前所述。

如果您需要基于宽度的流畅，响应性，可扩展的边距，并且无法使用绝对定位，请尝试使用CSS中的视口单元。视口单元的行为与基于百分比的维度非常相似，不同之处在于它们是根据视口窗口的尺寸计算的，并将根据浏览器窗口的尺寸进行缩放和调整大小。

vw =视口宽度：此测量基于视口的宽度。值1vw等于视口宽度的1％。

vh =视口高度：此测量基于视口的高度。值1vh等于视口高度的1％。

您也可以使用百分比小数，如此 -

.container {
    margin-top: .3vw;
}

几年前，视口单元并没有得到广泛的支持，但现在所有现代浏览器都支持它们。如果您熟悉它们，它将为您提供更多选择。

Answer 3

如果您尝试将元素集定位到position: absolute，可以使用top:，bottom:，right: left:将其放置在您想要的位置。 E.g。

element {
  right: 0;
  bottom: 0;
}