固定在滾動背景欄：CSS

正如標題所說，我希望有一個固定的酒吧，偏離中心，具有滾動背景。到目前爲止，我已經包含了我的代碼，到目前爲止，我可以在表面上有條形，但是固定在背景上，或者固定在圖像下面，但是按照我的意願固定在窗口上。我無法弄清楚如何將「contentBox」保留在窗口的表面上。謝謝您的幫助（和遺憾的亂碼，這是我在CSS第一次去）固定在滾動背景欄：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>

來源

2012-03-11 slev

如果我跟着你吧，我相信你想要的是一個固定位置酒吧在視口的頂部。這與位置來完成：固定，就像這樣：

<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從屏幕的頂部至少不亞於#contentBox抵消它很高。

一個附加說明 - 如果您想使用像hover這樣的psuedo-class，則不需要再次設置每個屬性，只需要修改那些屬性即可。因此，例如在#contentBox：懸停你只需要：

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

來源

2012-03-11 16:40:20 cmw

謝謝你的幫助。但問題仍然存在，但是當位置固定時，您看不到欄，但它是固定的並且背景可以滾動（您可以看到欄中的鏈接雲，而不是欄本身），但是當在頂部你可以看到酒吧，但位置不固定。 – slev 2012-03-12 01:17:55

我已經找到了解決方案，它是一個黑客位的但是。

首先在html代碼中，我將bg（背景）類從contentBox類中分離出來，如cmw所示。因爲修復內容框隱藏盒子的視圖在這裏是黑客進入的地方：製作第二個div類，「內容」，這是contentBox的一個子集，然後我可以顯示這個框固定到屏幕上的BG類剩下可滾動。

來源

2012-03-12 01:25:25 slev

固定在滾動背景欄：CSS

回答

相關問題