在固定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>