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

Question

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

我有一个高度和宽度以像素为单位的div,在div中我有一个youtube iframe(对于这个例子)它是margin-top百分比.

这个HTML:

这就是结果:

我知道这是一个可笑的小框架(所选div的右下角),但它只是一个例子:)

正如你所看到的,在代码中我有margin-top设置,99%但它实际上定位低很多.可能是什么原因造成的？

Answer 1

关键是top/bottom margin/ paddingproperties 的百分比值是相对于包含框的宽度.它不尊重父元素的高度.

8.3保证金属性:'保证金顶部','保证金权利','保证金底部','保证金左边'和'保证金'

<percentage>百分比是根据生成的框的包含块的宽度计算的.请注意,这是真实的 margin-top,并margin-bottom为好.如果包含块的宽度取决于此元素,则在CSS 2.1中未定义结果布局.

当您使用absolute定位,尝试使用top: 99%,而不是在一个百分比值是指高度在框的包含块.