如何让margin-top为负数的子容器溢出在父容器的外边？

Question

<div class="d1">
  <div class="d2">
     
  </div>
</div>
*{margin:0;}
.d1{position:relative;top:30px;width:100px;height:100px;background:red;}
.d2{position:relative;width:50px;height:50px;background:yellow;margin-top:-30px;}

想要实现的效果

但是我的写的总是贴着父容器的顶部。
在子元素不脱离文档流的情况下，子元素使用负边距可以溢出在父容器的外边吗？（只能使用负边距的方法，使用top负值会对底下的元素产生影响）
https://jsfiddle.net/b7x7L8s0/

Answer 1

应该是子元素的的上外边距传递给了父元素，同处于一个BFC。开启BFC就可以了，你给d1设置position：absolute.如果不想脱离文档流，那就设置d2的display：inline-block

Answer 2

你把.d2的position换成 position: absolute;就好了，

Answer 3

top: -30px;