사용 된 HTML 앵커 태그 뒤에 내용이 숨겨 짐

Question

여기에 약간 문제가있어 문제를 해결할 수 없습니다.

하나의 페이지 웹 사이트를 만들고 있는데, 내 탐색 막대에 3 개의 링크가 있습니다. 그 중 하나를 클릭하면 곧바로 특정 div로 스크롤해야하며, 그렇게됩니다. 하지만 지금은 내가 정한 고정 헤더 뒤에 있습니다.

HTML

<div class="header1"> 
      .... blablabla... 
</div> 

     <div class="navigbox"> 
      <div class="navig"> 
       <a href="#intro">About</a> 
      </div> 
     </div> 

     <div id="intro">     
       some text 
     </div> 

CSS

헤더의 높이를 때 페이지 스크롤로 간주되지 않기 때문이다

.header1{ 
    height: 20%; width: 100%; 
    position: fixed; 
    z-index: 1; 
    left:0; 
    right:0; 
    top: 0; 
    margin-left:auto; 
    margin-right:auto;} 

.navigbox{ 
    background: white; 
    position: fixed; 
    z-index: 1; 
    height: 10%; width: 80%; 
    left: 10%; 
    top: 20%;} 

.navig{ 
    height: 100%; width: 33.33%; 
    float:letf;}  

#intro{ 
    background: white; 
    height: 60%; width: 70%; 
    left: 10%; 
    top: 30%; 
    position: absolute; 
    padding: 5% 5% 0 5%;} 

Answer 1

. id을 div에 적용하는 대신 다른 요소 (예 : a)를 앞에두고 두 개를 br과 분리하십시오.

편집 : This answer이 더 좋은 방법입니다.

Answer 2

조지 답에 대한 대안으로 div 안에있는 첫 번째 요소의 맨 위에 여백을 적용하여 필요한 공간을 추가 할 수 있습니다. 그렇게하면 추가 요소가 필요하지 않습니다. 위쪽/아래쪽과 왼쪽/오른쪽 모두 패딩 (padding) %가 부모의 너비에 상대적으로 계산되기 때문에 까다로운 일이 될 것입니다. 그러나 높이 %는 부모 높이와 관련이 있습니다.

Answer 3

CSS에서 다른 요소는 더 높거나 같은 z- 인덱스를 가지고 있기 때문에 header1과 겹치고 있습니다. 헤더 1의 Z- 색인을 하나가 아닌 더 높게 설정하십시오.