我希望右侧和左侧 div 固定在与蓝色框一致的类 main-wrapper 的位置...现在它在标题中占据顶部位置。希望它 float 固定而不是绝对的。它应该勾选 main-wrapper.position top:0 到 main-wrapper。尝试了几乎一切都不起作用。
下面是代码:
.header{
width:500px;
margin:0 auto;
background:red;
height:300px;
}
.container{
margin:20px auto;
background:blue;
height:1000px;
width:500px;
}
.header-wrapper,.main-wrapper{
width:100%;
}
.main-wrapper{
position:relative;
}
.left-ad,.right-ad{
width:100px;
height:250px;
background:pink;
position:fixed;
}
.left-ad{
left:0;
top:0;
}
.right-ad{
right:0;
top:0;
}
<div class="header-wrapper">
<div class="header">
</div>
</div>
<div class="main-wrapper">
<div class="left-ad">
</div>
<div class="right-ad">
</div>
<div class="container">
</div>
</div>
最佳答案
应用 position:sticky 属性使左右 div 成为固定的绝对位置。 Position Property
<div class="header-wrapper">
<div class="header">
</div>
</div>
<div class="main-wrapper">
<div class="left-ad">
</div>
<div class="right-ad">
</div>
<div class="container">
</div>
</div>
`.header {
width:500px;
margin:0 auto;
background:red;
height:500px;
}
.container {
margin:20px auto;
background:blue;
height:1000px;
width:500px;
}
.header-wrapper, .main-wrapper {
width:100%;
}
.main-wrapper {
position:relative;
}
.left-ad, .right-ad {
position: sticky;
width:100px;
height:250px;
background:pink;
}
.left-ad {float:left; left:0; top:0; }
.right-ad {float:right; right:0; top:0; }`
关于html - 相对于父而不是浏览器的固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49271572/