关于margin top百分比值的问题

不想说今天心情有多差!

9点多开始发现一个"bug",需求是根据屏幕高度动态调整某个div的位置，代码大概是这样的。

    <div style="margin-top: 25%;
                margin-left:25%;
                      width:50px;
                     height:50p;
           background-color: yellow;">
    </div>

演示：

然后就发现，“当窗口宽度变化的时候，margin-top变了，变了！了！！！” ,调了一个晚上，问了好多前端群，贴上代码，竟然没有人知道为什么！！！

最后找到一句话：

‘margin-top‘, ‘margin-bottom‘

Percentages: refer to width of containing block

对，没错，margin-top 设置成百分比的时候，只跟父容器宽度有关！！！宽度！！！谁能告诉我为什么是宽度！！！深深地被自己的无知感动了。嗯！加油吧！