html - CSS - 定位难题

Question

我正在使用相对 div 中的绝对定位。代码如下:http://jsfiddle.net/32mq5v6L/1/

HTML

<div id="container">

    <div id="featured-posts">
        <div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/star-wars-droid.jpg" /></div>
        <div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/han-solo-1140x350.jpg" /></div>
    </div>

    <div id="other-content">
    Other Content
    </div>

</div>

CSS

#container { width: 100%; margin: 0 auto; background: #eee; }

#featured-posts { position: relative; width: 100%; height: auto;}
.slide { width: 100%; height: 20px; position: absolute; top: 0; }

#other-content { }

我的问题是 other-content div 出现在#featured-posts 下方，除非我对该容器应用设置的高度，但我不能这样做，因为目标是让所有这些响应。

我哪里错了？

Answer 1

如果您计划在定位容器之后放置 #other-content，则必须创建新的堆叠上下文才能将其移动到上方。因为它没有定位，所以一种方法是设置非常小的不透明度:

#other-content {
    z-index: 10;
    opacity: .99;
}

演示:http://jsfiddle.net/32mq5v6L/1/