正如标题所说，我希望有一个固定的栏，偏离中心，有一个滚动的背景。到目前为止，我已经包含了我的代码，到目前为止，我可以将条形图放在表面但固定在背景上，或者将条形图固定在图像下方，但按照我的意愿固定在窗口上。我不知道如何将“contentBox”保留在窗口表面。感谢您的帮助(对于乱七八糟的代码感到抱歉，这是我第一次接触 CSS)
<html>
<head>
<style type="text/css">
body{ height:100%}
#bg {
position:absolute;
background-color:grey;
top:0;
left:0;
width:100%;
height:100%;
}
#bg img {
position:absolute;
top:0;
bottom:0;
margin-left:10%;
min-width:80%;
height:100%;
}
#contentBox
{
position:top;
left:0;
margin-top:25%;
height:30%;
max-width:90%;
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}
#contentBox:hover
{
position:top;
left:0;
margin-top:25%;
height:30%;
max-width:90%;
background-color:#ffffff;
opacity:0.9;
filter:alpha(opacity=90);
}
#linkCloud
{
float:left;
min-width:11%;
min-height:100%;
background-color:blue;
opacity:0.9;
filter:alpha(opacity=90);
}
#feed
{
float:right;
top:0;
right:0;
min-height:100%;
min-width:10%;
background-color:red;
opacity:0.9;
filter:alpha(opacity=90);
}
</style>
</head>
<body>
<div id="bg">
<img src="/home/samzors/Desktop/Gimp/skull.jpg" alt="">
<div id="feed">
<p>hello world</p>
</div>
<div id="contentBox">
<div id="linkCloud">
<p>hello world</p>
</div>
</div>
</div>
</body>
</html>
最佳答案
如果我没听错，我相信您想要的是在视口(viewport)顶部有一个固定 位置的栏。这是通过 position: fixed 完成的，如下所示:
<style>
#contentBox {
position: fixed;
left: ; /* some distance from left side of screen */
top: ; /* some distance from top of screen */
}
...
</style>
...
<body>
<div id="contentBox">content</div>
<div id="bg"> rest of your content </div>
</body>
您可能还想为 #bg 添加一个 margin-top 属性，使其从屏幕顶部的偏移量至少与 #contentBox 的高度一样多。
一个额外的注意事项——如果你想使用像 :hover 这样的伪类，你不需要再次设置每个属性，只需要改变那些。因此，例如在#contentBox:hover 中，您只需要:
#contentBox:hover {
opacity: 0.9;
filter = alpha(opacity = 90);
}
关于html - 可滚动背景上的固定栏 : CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9656237/