내 탐색 바를 페이지 맨 위로 수정하는 방법

Question

누군가 내 웹 페이지의 상단 부분을 고치도록 도와 줄 수 있는지 궁금합니다.

position : fixed 속성을 사용해 보았습니다.하지만이 모든 것이 내 콘텐츠가 고정 div와 겹치는만큼 방해가됩니다.

내 웹 사이트는 여기에 있습니다 : 나는 네비게이션 바 위의 모든 것을 싶습니다

www.crookedcartoon.co.uk/print.html

페이지의 상단과 그 아래로 스크롤 할 내용 떨어지지 않고 붙어 포함 NAVBAR.

나는 이것이 내 이미지의 대부분을 png 대신 jpg로 변경해야한다는 것을 의미한다는 것을 알고 있습니다. 그러나, 나는이 주위에 어쨌든 있었는지 궁금 해서요? PNG 이미지의 투명한 부분을 통해 볼 수있는 페이지 상단에 도달하는 대신 내용이 스크롤되는 가짜 선을 만드는 것과 마찬가지로 사라집니다. 나는 iframe을 사용하고 싶지 않습니다. 이것이 유일한 방법이 아니면.

감사합니다.

Answer 1

iframe은 분명히 올바른 선택이 아닙니다. 위에 놓고 싶은 물건 주위에 div를 놓고 position: fixed을 올려 놓고 왼쪽 상단에 위치 시키십시오.

<div class="ontop"> 
    <div id="top"></div> 
    <div id="logo"></div> 
    <div id="contact"></div> 
    <div id="navbar"></div> 
</div> 

는 그 후, .ontop의 높이와 동일 #content-holder 일부 margin-top를 추가합니다. 이는 문서 플로우 (position: fixed로 인해)에서 제거되고 내용이 그 아래로 이동하기 때문에 필요합니다.

background-color: white에 .ontop도 추가하면 투명도 문제가 해결됩니다.

설정을 복제하려고 시도하면 여기에 working demo입니다.

Answer 2

당신은 내가 최고 배경이 흰색 만들기, 하단 투명의 일부를함으로써 이미지를 업데이트 한대로이

CSS를 아래로 업데이트하십시오 시도 할 수 있습니다. [1 - 다운로드 IMAGE AND 주목]

#ontop { 
    background: inherit; 
    height: auto; 
    margin-top: -10px; 
    position: fixed; 
    z-index: 10; 
} 
#contact { 
    background: none repeat scroll 0 0 white; 
    height: 45px; 
    margin-bottom: 1px; 
    margin-left: -5px; 
    margin-top: -8px; 
    position: relative; 
    vertical-align: top; 
    width: 1127px; 
} 
#logo { 
    height: 62px; 
    margin-left: -10px; 
    position: relative; 
    width: 1127px; 
    z-index: 1111; 
} 

] 1