스크롤 할 수있는 배경 위에 고정 된 막대 : CSS

제목에 스크롤 막대가있는 가운데 고정 막대가 있어야합니다. 지금까지 코드를 포함 시켰 습니다만, 표면에 막대가있을 수 있지만 배경 아래로 고정되어 있거나 이미지 아래의 막대는 고정되어 있지만 원하는대로 고정되어 있습니다. 나는 "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>

출처

2012-03-11 slev

(지저분한 코드 및 죄송합니다, 이것은 CSS에서 처음으로 이동입니다) 뷰포트 상단에 있습니다. 이것은 위치로 수행됩니다 고정과 같이 :

<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>

당신은 아마도 #contentBox 적어도만큼 화면 상단에서 그것을 상쇄 #bg위한 여백 - 가기 속성을 추가 할 것 키가 크다.

추가 참고 사항 - hover와 같은 psuedo-class를 사용하려는 경우 각 속성을 다시 설정할 필요가없고 변경되는 항목 만 다시 설정할 필요가 없습니다. #contentBox에서 예를 들면 그래서 : 가져가 당신이 필요 유일한 것 :

나는 해결책을 발견

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

출처

2012-03-11 16:40:20 cmw

도움 주셔서 감사합니다. 문제는 여전히 존재하지만 위치가 고정되어있을 때 막대를 볼 수는 없지만 고정되어 있으며 배경이 스크롤 가능합니다 (막대 자체에있는 링크 구름을 볼 수 있지만 막대 자체는 아닙니다). 위에서 막대를 볼 수는 있지만 위치는 고정되어 있지 않습니다. – slev

, 그것은 그러나 해킹의 비트입니다.

먼저 html 코드에서 cmw가 제안한대로 bg (background) 클래스를 contentBox 클래스에서 분리했습니다. 컨텐트 상자를 고정하면 여기에서 볼 때 상자가 해킹 된 부분입니다. 두 번째 div 클래스 인 "content"를 contentBox의 하위 집합으로 만들면이 상자를 bg가있는 화면에 고정하여 표시 할 수있었습니다 스크롤 가능한 나머지 클래스

출처

2012-03-12 01:25:25 slev

스크롤 할 수있는 배경 위에 고정 된 막대 : CSS

답변

관련 문제