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 { }

我的问题是其他内容div出现在#features-posts下面，除非我对该容器应用了一个设置高度，我无法做到这一点，因为目标是使所有这些响应。

我哪里错了？

Answer 1

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

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

CSS - 定位难题

1 个答案:

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