相对定位和绝对定位问题
相对定位和绝对定位问题
提问于 2015-11-13 17:08:56
我有一些问题，实现一个元素的绝对定位。我试图实现两个横幅广告，以保持不变，当用户滚动通过一个div。我试着把父母的位置改为亲戚，把我想要保持的孩子的位置变成绝对的。这得到了初始布局的权利，但我仍然能够滚动通过绝对的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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-13 17:12:06
使用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'
});
}
});确保为position:fixed;元素设置CSS规则#home-banner2。
希望这能帮上忙。
Stack Overflow用户
发布于 2015-11-13 17:24:46
实际上，您的代码的工作方式与预期完全相同。
Position: absolute使用position: relative相对于最近的父元素移动元素。因此，如果父元素位于viewport之外，那么它就会执行子绝对元素。
要获得想要的结果，您需要一些javascript/jquery来修复元素，因为它的父元素输入了viewport，并在父元素离开时“unfix”。
类似于Bootstraps词缀的东西
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33698184
复制相关文章
相似问题
腾讯云开发者
