Question

我有一个滑块，滑块图像本身需要设置为position: absolute;，以防止图像加载到另一个下面，而是相互叠加。这很好用，除了它下面的任何内容，而不是低于它，实际上在滑块之上。如何在滑块之后让内容再次开始流动？我无法真正设置高度，因为滑块的高度会根据浏览器的宽度而变化（响应）。

这是一个简单的例子（不，我不在实际项目中使用内联CSS）：

<div>logo and stuff here</div>
<div style="position: absolute;">slider goes here</div>
<div>stuff below the slider (i.e. content)</div>

第三个div中的内容应该低于滑块，但它实际显示在它上面。我希望在绝对定位div之后恢复页面的流程。

编辑：这是实际滑块代码的示例（尽管替换了图像）。

http://jsfiddle.net/ApxJ4/1/

Answer 1

像这样做

<div>logo and stuff here</div>
<div style="position: relative; height : 200px; /* set fixed height here, follow absolute div height */ ">
<div style="position: absolute;">slider goes here</div>
</div>
<div>stuff below the slider (i.e. content)</div>

Answer 2

HTML

<div>logo and stuff here</div>
<div class="outerDiv" style="position:relative"><div class="innerDiv" style="position: absolute;">slider goes here</div></div>
<div>stuff below the slider (i.e. content)</div>

JQuery的

$( document ).ready(function(){ 
$(".outerDiv").css('height',$(".innerDiv").height());
});

$( window ).resize(function(){ 
$(".outerDiv").css('height',$(".innerDiv").height());
});

动态设置Div的高度。检测调整大小并更改内容。 DEMO

为你的小提琴

$( document ).ready(function(){ 
    $(".triggers").css('height',$(".mask ul li").height());
    $(".contentDiv").css('height',$(".triggers").height()+$(".mask li").height());

});

$( window ).resize(function(){ 
    $(".triggers").css('height',$(".mask ul li").height());
    $(".contentDiv").css('height',$(".triggers").height()+$(".mask").height());
});

Fiddle Updated

对职位的协助：绝对;带滑块

2 个答案: