我有一个DIV，当你滚动时它会固定在页面顶部。为了实现这一点，该对象是固定定位的。
问题是，我还有一个相对定位的容器内部的div。相对定位的DIV显示得很好，但其中的绝对定位元素却没有显示。现在，在用户滚动并父级DIV变为固定定位后，相对潜水艇中的东西（即绝对内容）消失在固定div后面。
我尝试过一些z-index的东西，但似乎没有效果。
这是JSFiddle: http://jsfiddle.net/c2vqd5fw/
这是代码：
$(document).ready(function() {
$(window).scroll(function(){
var docViewTop = $(window).scrollTop();
var offset = 0;
/**
* Always-On-Top Scroll expects HTML in the format:
* <div class="scroll-wrapper">
* <div class="scroll-aot">...</div>
* </div>
**/
$('.scroll-wrapper').each(function(){
if($(this).hasClass('scroll-xs-disabled') && $(window).width() <= 767) {}
else if($(this).hasClass('scroll-sm-disabled') && $(window).width() <= 991) {}
else if($(this).hasClass('scroll-md-disabled') && $(window).width() > 991) {}
else {
var wrapperTop = $(this).offset().top;
var scrollAot = $(this).find('.scroll-aot')[0];
if(docViewTop >= wrapperTop && !$(scrollAot).hasClass('floating')){
$(scrollAot).width($(this).width());
$(scrollAot).css("top", offset);
$(scrollAot).toggleClass('floating');
$(this).height($(scrollAot).outerHeight());
} else if (docViewTop < wrapperTop && $(scrollAot).hasClass('floating')){
$(scrollAot).removeAttr('style'); // oh no it has no style!
$(this).removeAttr('style');
$(scrollAot).toggleClass('floating');
}
offset = offset + $(scrollAot).height();
docViewTop = docViewTop + $(scrollAot).height();
}
});
});
$('.toggle-switch').click(function(){
$(this).children().toggleClass('off');
});
});.stuff-above{
width:100%;
height:100px;
background-color:grey;
}
.stuff-below{
width:100%;
height:1000px;
background-color:grey;
}
.scroll-wrapper{
width: 100%;
}
.scroll-wrapper.small{
width: 50%;
}
.scroll-wrapper.floating{
position: relative;
}
.scroll-aot{
width: 100%;
background-color:green;
}
.scroll-aot.floating{
position: fixed;
z-index: 1000;
}
.toggle-switch{
z-index:2000;
display: inline-block;
position:relative;
overflow: hidden;
cursor:pointer;
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
width:64px;
height:32px;
padding:0px;
border:2px solid #999999;
border-radius:2px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.toggle-switch .content{
position:absolute;
z-index:2000;
top:0px;
left:0px;
width:200%;
height:32px;
transition: left 0.4s ease-in 0s;
-moz-transition: left 0.4s ease-in 0s;
-webkit-transition: left 0.4s ease-in 0s;
-o-transition: left 0.4s ease-in 0s;
}
.toggle-switch .content.off{
left:-64px;
transition: left 0.4s ease-in 0s;
-moz-transition: left 0.4s ease-in 0s;
-webkit-transition: left 0.4s ease-in 0s;
-o-transition: left 0.4s ease-in 0s;
}
.toggle-switch .content #on{
background-color: #2FCCFF;
color: #FFFFFF;
}
.toggle-switch .content #off{
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.toggle-switch .content .option{
display: block;
float: left;
width: 50%;
height: 32px;
padding: 0px 7px;
line-height: 32px;
font-size: 14px;
font-weight: bold;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.toggle-switch .slider{
z-index:2000;
background-color:#bbbbbb;
display: inline-block;
width:34px;
height:32px;
border-left:1px solid #999999;
border-right:1px solid #999999;
position: absolute;
right:-1px;
transition: right 0.3s ease-in 0s;
-moz-transition: right 0.3s ease-in 0s;
-webkit-transition: right 0.3s ease-in 0s;
-o-transition: right 0.3s ease-in 0s;
}
.toggle-switch .slider.off{
right: 32px;
transition: right 0.3s ease-in 0s;
-moz-transition: right 0.3s ease-in 0s;
-webkit-transition: right 0.3s ease-in 0s;
-o-transition: right 0.3s ease-in 0s;
}
.toggle-switch .slider img{
max-width:32px;
max-height:32px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="stuff-above"></div>
<div class="scroll-wrapper">
<div class="scroll-aot">
<div class="onOffColumn" title="Friends from LinkedIn">
<div class="toggleSliderCntnr">
<div id="liGroup" class="toggle-switch">
<div class="content">
<div id="on" class="option">On</div>
<div id="off" class="option">Off</div>
</div>
<div class="slider">
<img class="toggleImg" src="" alt="Linkedin"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="stuff-below"></div>最奇怪的是，当蓝色隐藏时，如果与空框交互，则绝对定位的内容会重新出现。你有什么想法吗？
.toggle-switch类的overflow: hidden;属性上。如果将其移除，则滚动问题将消失。不幸的是，我不知道这是为什么。如果知道，我就会回答而非评论。这里有一个更新的fiddle可以展示它的运行情况。我已经修复了开关样式但没有使用溢出，但这里还需要更多的关注。 - esvendsen