相对和绝对定位的问题

我有一些问题实现元素上的绝对定位。我试图实现两个横幅广告保持静止时，用户滚动通过一个股利。我试图改变父母对亲属的立场，并且我希望孩子能够保持静止的立场。这会得到最初的放置权，但我仍然可以滚动过去的绝对div。这是适当的CSS/HTML。相对和绝对定位的问题

HTML：

<div id="pane1"> 


    <div id="home-banner1" class="banner"> 

    </div> 

    <div id="home-banner2" class="banner"> 

    </div> 

    <?php ..... ?> 


</div>

CSS：

#pane1{ 
width:100%; 
background-repeat: repeat; 
height:auto; 
display:inline-block; 
padding:20px 50px 50px 50px; 
min-height:500px; 
text-align:center; 
position:relative; 
} 

.banner{ 
width:50px; 
height:300px; 
background-color:white; 
position:absolute; 
top:0; 
} 

#home-banner1{ 
left:0; 
} 

#home-banner2{ 
right:0; 
}

感谢您的帮助！欢呼声

来源

2015-11-13 colinmcp

使用position:fixed;作为横幅，以便即使在向上或向下滚动页面时，它仍会保持在固定位置的屏幕上。

编辑

对于隐藏和横幅仅低于#container元素的显示，你可以使用一些jQuery的是这样的：

$(window).scroll(function() { 
    var top_div_height = $('#container').height(); // height of the blue top container 

    if ($(this).scrollTop() < top_div_height) { // hide the rightside banner if the user is viewing that blue top container 
     $('#home-banner2').css({ 
      'display': 'none' 
     }); 
    } 
    else{ //... otherwise show the rightside banner 
     $('#home-banner2').css({ 
      'display': 'block' 
     }); 
    } 
});

确保你设置的CSS规则position:fixed;为#home-banner2元件。

希望这会有所帮助。

来源

2015-11-13 17:12:06

嗨Akhilesh，我试过了，但它修复横幅DOM的，而不是在“pane1” DIV顶部。 – colinmcp

@colinmcp，我已经更新了我的答案。核实。 –

谢谢，这就是我正在寻找的！ – colinmcp

实际上，您的代码完全按预期工作。

Position: absolute使用position: relative将元素相对于最接近的父元素进行移动。所以，如果父元素超出了视口范围，那么它会执行子绝对元素。

为了得到想要的结果，您需要一些javascript/jquery来修复该元素，因为其父级在父级离开时进入视口和“unfix”。

东西类似Bootstraps' affix

来源

2015-11-13 17:24:46 Iecya

相对和绝对定位的问题

回答

相关问题