相对div崩溃与绝对定位的孩子

Question

我正在为我正在制作的网站建立一个居中的旋转图片库。为了正常运行，由于fadeIn fadeOut功能，图像必须绝对定位。

我遇到的问题是父div（相对定位的div）在绝对定位的图像上崩溃....这是预期的。

有没有针对此的css修复？我知道你可以使用javascript来解决这些元素的大小...但是这只会变得非常混乱，如果可能的话，我更喜欢更好的兼容性w / css。

这是jsfiddle： http://jsfiddle.net/john23/86y311q3/

代码。因此，使用此代码，我试图获得＆＃34; blue＆＃34;上课时不要崩溃＆＃34; red＆＃34;类。

＆＃13;

＆＃13;

#wrapper {
    border: 1px solid black;
    text-align:center;
}

#blue {
    position:relative;
    display:inline-block;
    border:1px solid blue;
}

#red {
    border:1px solid red;
    position:absolute;
    width:100px;
    height:200px;
    left: -50px;
    margin-top:-50%;
    margin-left:-50%;
}

＆＃13;

<div id='wrapper'>
  <div id = 'blue'>
    <div id='red'> 
        <p>I have an image in here<p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;