내 절대 위치 div가 상대 위치 div를 덮는 이유는 무엇입니까?

Question

나는 내 웹 사이트의 상단에 "리본"유형의 헤더가 :

#top-wrapper { 
    border-bottom: 5px solid #A1C1BE; 
    width: 100%; 
    background-color: #59554E; 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin-bottom: 100px; 
    padding: 10px 0 0 0; 
    color: #C0C0A8; 
} 

절대 위치는 (내가 아는까지로)가 사용자의 브라우저의 전체 폭을 차지하고 있는지 확인하기 위해 필요합니다. 하지만, 내 웹 페이지의 나머지 (내 모든 다른 div가 들어있는 본체)이 리본 뒤에 숨겨져 :

#pagebody { 
    width: 60%; 
    margin-left: auto; 
    margin-right: auto; 
} 

내가 말 사이에 <br>의 무리를 추가 발견 할 수 있었던 유일한 해결책 top-wrapper이고 시작은 pagebody입니다.

더 좋은 방법이 있나요?

Answer 1

다른 답변에서 내 의견으로 당 : 그러나 전반적으로, 당신은 단순히 pagebody 태그에 위쪽 여백이나 패딩을 추가하려면이 같은 필요

당신은 단지 width: 100%를 사용할 수 있지만, 확인 또한 necolas 'normalize.css을 확인해야

html, body { 
    margin: 0; 
    padding: 0; 
} 

: 당신은 잎 기본 격차를 제거합니다. 거의 모든 사이트에서 필요한 기본 CSS 규칙이 모두 포함되어 있습니다.

Answer 2

절대 위치 지정은 일반적인 흐름에서 요소를 가져옵니다. 너비를 최대화하기 위해 절대 위치 지정이 필요하지 않습니다. 너비는 100 %입니다.

Answer 3

이렇게하는 방법에는 여러 가지가 있습니다. 먼저 pagebody 요소 외부에 최상위 래퍼를 배치 한 다음 너비를 100 %로 정의하면됩니다.

그래픽이 리본인데 페이지 바디 요소의 윗부분과 겹쳐 져야한다면 - 위에서 말한 것처럼 생각하면 위치 절대 값과 Z- 인덱스를 사용하여 페이지 바디 위에 배치 할 수 있습니다 요소. 그런 다음 적절한 padding-top을 pagebody에 추가하십시오.

당신은 정말 당신이 완전히 무엇인지 알지 못하기 때문에 html을 제공하지 않았습니다.

Answer 4

Z- 색인으로 일부 해킹하는 경우가 아니면 (심지어 제한적이기는하지만) 절대적으로 배치 된 요소 (상단 래퍼)는 항상 상대적 요소 (페이지 바디) 위에 있습니다. 당신이 아마하고 싶은 것은 pagebody 요소를 top-wrapper 바로 아래로 이동시키는 것입니다. 높이가 지정되지 않았기 때문에 최고 랩퍼의 높이가 얼마나되는지 모르겠습니다. 글꼴 크기의 차이 때문에 글꼴을 모를 수도 있습니다.

margin-top:50px;