Question

正如标题所说，我希望有一个固定的酒吧，偏离中心，背景滚动。到目前为止，我已经包含了我的代码，截至目前我可以在表面上使用条形图但是固定在背景上，或者图像下方的条形图，但是我可以按照我的意愿固定在窗口上。我无法弄清楚如何将“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>

Answer 1

如果我跟着你，我相信你想要的是一个在视口顶部有一个固定位置的栏。这是通过 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一样高。

另外一个注意事项 - 如果你想使用psuedo类，例如：hover，你不需要再次设置每个属性，只需要设置正在更改的属性。例如，在#contentBox：hover中你只需要：

#contentBox:hover {
    opacity: 0.9;
    filter = alpha(opacity = 90);
}

Answer 2

我找到了一个解决方案，但它有点像黑客。

首先在html代码中我将bg（背景）类与contentBox类分开，如cmw所示。因为修复内容框隐藏了这里的框，这是黑客进来的地方：制作第二个div类，“content”，这是contentBox的一个子集，然后我可以用bg将这个框固定到屏幕上类仍然可滚动。

固定栏在可滚动的背景：CSS

2 个答案: