使用float,position:absolute div被隐藏

Question

<div id="first">
</div>
<div id="second">
  <div id="child"></div>
</div>

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    float:left;
    z-index:1
}

#child {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: -25px;
    top: 100px;
}

#second{
  float:left;
  width:100px;
  height:200px;
  background-color:yellow;
  position:relative;
  overflow-y: scroll;
  z-index:100
}

我需要将first,second左右布局，所以使用了float;
我需要兑child位置进行定位，所以使用了Postition:absolute;
这些都没有问题，但是：
如果父div使用overflow:hidden/overflow的话，会导致child一半被遮住。
像这样：

如果我把overflow-y去掉，或者属性改成visible,就变成了我想要的

但是问题是：overflow-y:scroll是必须的。请问如何解决？

Answer 1

红色的盒子写在first盒子里，然后相对于first盒子做绝对定于，把child盒子移过去中间吧。
非要写在second里的话，是解决不了的。

Answer 2

child不要做first的子元素就可以了