在固定Div内的相对DIV内的绝对DIV在滚动时消失

Question

滚动时，我有一个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> 

最奇怪的是，如果你与空盒子互动（当蓝色被隐藏时），绝对定位的东西会重新出现。 思考？

Answer 1

更新：我没有弄清楚，但我重新编写了切换，所以它根本不使用绝对定位或相对定位，现在它干净利落。 对于任何想要查看它的人来说，这里是： http ： //jsfiddle.net/c2vqd5fw/

 .toggle-switch .content{ width:150%; height:32px; transition: margin-left 0.4s ease-in 0s; -moz-transition: margin-left 0.4s ease-in 0s; -webkit-transition: margin-left 0.4s ease-in 0s; -o-transition: margin-left 0.4s ease-in 0s; } .toggle-switch .content.off{ margin-left:-32px; transition: margin-left 0.4s ease-in 0s; -moz-transition: margin-left 0.4s ease-in 0s; -webkit-transition: margin-left 0.4s ease-in 0s; -o-transition: margin-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: center; } .toggle-switch .content .option{ display: inline-block; float: left; width: 31px; 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{ background-color:#bbbbbb; display: inline-block; float:left; border-left:1px solid #999999; border-right:1px solid #999999; } .toggle-switch .slider img{ max-width:32px; max-height:32px; min-width:32px; min-height:32px; } 

 <div id="liGroup" class="toggle-switch"> <div class="content"> <div id="on" class="option">On</div> <div class="slider"> <img class="toggleImg" src="" alt="Linkedin"/> </div> <div id="off" class="option">Off</div> </div> </div>