фиксированный бар над прокручиваемым фоном: 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 высокий.

Еще одно примечание - если вы хотите использовать класс psuedo, например: hover, вам не нужно снова устанавливать каждое из свойств, только те, которые меняются. Так, например, в #contentBox: парить вам только нужно будет:

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

источник

2012-03-11 16:40:20 cmw

Благодарим за помощь. Проблема все еще существует, хотя, когда позиция фиксирована, вы не можете видеть панель, но она фиксирована и фон прокручивается (вы можете видеть облако ссылок, которое находится в панели, а не только панель), но когда сверху вы можете видеть панель, но позиция не фиксирована. – slev

Я нашел решение, это немного рубить однако.

Сначала в html-коде я выделил класс bg (background) из класса contentBox, как это было предложено cmw. так как исправление окна содержимого спрятало окно из представления здесь, где был взломан: создание второго div-класса «content», который был подмножеством contentBox, я тогда смог отобразить это поле, прикрепленное к экрану, с помощью bg класс остается прокручиваемым.

источник

2012-03-12 01:25:25 slev

фиксированный бар над прокручиваемым фоном: CSS

ответ

Смежные вопросы