Z-side by side fixed divs에 대한

Question

고정 된 머리글을 가진 웹 사이트를 설계하고 상단에 고정 막대가 있고 그 위에 부착 된 세로 탐색 모음이 있습니다.

이

#top{ 
    position: fixed; 
    width: 100%; 
} 

#menu{ 
    text-align: left; 
    width: 175px; 
    border-right-style:solid; 
    border-bottom-style: solid; 
    border-color: #4d4d4d; 
    border-bottom-right-radius: 15px; 
    float: left; 
} 

#user{ 
    float: right; 
    text-align: right; 
    font-size:0.865em; 
} 
#main{ 
    padding-top: 100px; 
} 

HTML :

브라우저가 탐색 생각

<div id='top'> 
    <div style="font-size: 60px; border-color: #4d4d4d; border-bottom-style:solid; border-width:3px; background: white">ST MARKS CRAG<div style="font-size: 20px">A breath of fresh air</div></div> 
     <span id='user' style="padding-top: 0; margin-top: 0"> 
      [@usertext] 
     </span> 
     <span id="menu" style="background: white"> 
      <p>&emsp;<a href="#">Home</a></p> 
      <p>&emsp;<a href="#">My data</a></p> 
      <p>&emsp;<a href="#">About</a></p> 
      <p>&emsp;<a href="#">Members stories</a></p> 
      <p>&emsp;<a href="#">Useful Links</a></p> 
      <p>&emsp;<a href="#">Report a problem</a></p> 
      <p>&emsp;<a href="#">Contact</a></p> 
     </span> 
    </div> 
</div> 
<div id='main'> 
     <div class = "bubble"> 
       TEST 
     </div> 
</div> 

이제 문제가되는 것을 나는 여기를 클릭 무엇을 의미하는지 확인하려면 : CSS 뭔가

처럼 http://crag.stmarkssheffield.co.uk는 이 코드는 본다 막대는 기본 콘텐츠 앞에 렌더링되며 그 옆에서 시작되며 기본 콘텐츠와 상호 작용할 수 없습니다. 주 콘텐츠의 Z- 색인을 더 높게 설정하면 탐색 모음과 상호 작용할 수 없습니다. 어떻게해야합니까?

Answer 1

가, 아래쪽, 왼쪽 및 오른쪽 CSS 규칙을 맨 사용할 필요가이 문제를 해결하려면 ... 그것을 대신 이런 일이 있어야합니다.

#header{ 
    background:white; 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    left: 0px; 
    border-bottom-style: solid; 
    border-color: #4d4d4d; 
} 

#menu{ 
    background: white; 
    text-align: left; 
    width: 175px; 
    border-right-style:solid; 
    border-bottom-style: solid; 
    border-color: #4d4d4d; 
    border-bottom-right-radius: 15px; 
    left: 0px; 
    top: 94px; 
    position: fixed 
} 

#user{ 
    top: 94px; 
    text-align: right; 
    font-size:15px; 
    right: 0px; 
    position: fixed; 
} 

그리고 HTML : 개정 된 CSS는 이것이다

<div id="header"> 
    <h1>ST MARKS CRAG</h1> 
    <h2>A breath of fresh air</h2> 
</div> 
<div id="user"> 
    [@usertext] 
</div> 
<div id="menu"> 
    <p>&emsp;<a href="#">Home</a></p> 
    <p>&emsp;<a href="#">My data</a></p> 
    <p>&emsp;<a href="#">About</a></p> 
    <p>&emsp;<a href="#">Members stories</a></p> 
    <p>&emsp;<a href="#">Useful Links</a></p> 
    <p>&emsp;<a href="#">Report a problem</a></p> 
    <p>&emsp;<a href="#">Contact</a></p> 
</div> 

Answer 2

당신은

<div id='top'> 
<div style="font-size: 60px; border-color: #4d4d4d; border-bottom-style:solid; border-width:3px; background: white">ST MARKS CRAG<div style="font-size: 20px">A breath of fresh air</div> 
</div> 

<div id='main'> 

    <div id="menu" style="background: white"> 
     <p>&emsp;<a href="#">Home</a></p> 
     <p>&emsp;<a href="#">My data</a></p> 
     <p>&emsp;<a href="#">About</a></p> 
     <p>&emsp;<a href="#">Members stories</a></p> 
     <p>&emsp;<a href="#">Useful Links</a></p> 
     <p>&emsp;<a href="#">Report a problem</a></p> 
     <p>&emsp;<a href="#">Contact</a></p> 
    </div> 

    <div class = "bubble"> 
      TEST 
    </div> 
</div>