2010-02-17 4 views
17

헤더, 본체 및 바닥 글이 있습니다. 머리글과 본체의 스타일이 적절합니다. 이제 바닥 글 나는 mainbody 뒤에 나타나게하려면, 그래서 내가 사용 :부정적인 상대 위치 지정 문제를 사용하는 CSS

z-index: -1; 
position: relative; 
top: -60px; 

이 원하는 결과를 제공하지만, 나는 바닥에서 60 픽셀의 추가 공간을 얻을.

이 여분의 공간을 지우려면 어떻게해야합니까?

+0

어떤 브라우저에서? 데모 페이지를 만드셨습니까? – jeroen

+0

파이어 폭스를 코딩에 사용하고 있습니다. 나는 그것을 localhost에 가지고있다. – noobcode

+1

내 게시물을 편집 해 주셔서 감사 드리며 깨끗하게 보이게하십시오. 다음에 나는 더 명확히하려고 노력할 것이다. 감사합니다 – noobcode

답변

24

폴이 맞습니다. top: -60px; 대신 margin-top: -60px; 또 다른 가능한 해결책은 "메인 바디"를 으로 설정 한 다음 바닥 글에 position: absolute; bottom: 60px;을 사용하는 것입니다.이 woild는 바닥 글이 "메인 바디"내부로 옮겨 져야 함을 의미합니다. 꼬리말의 부모가 "mainbody"와 함께 흐르는 한 당신은 그 요소에서이 같은 트릭을 대신 사용할 수 있습니다.

+0

감사합니다. 당신이 제공 한 두 가지 솔루션을 모두 시도했습니다. margin-top의 경우 : - 60px 변경되지 않고 그대로 있습니다. 그러나 DW에서는 효과를 보여줍니다. 또한 position : absolute를 사용하면 div # footer가 다르게 동작합니다. 나는 본체 자체에 오류를 일으키는 무언가가 있다고 생각합니다. 빠른 도움말과 조언을 보내 주신 모든 분들께 감사드립니다. 정말 감사합니다. – noobcode

+0

마진 탑은 나를 위해 일했습니다. 감사합니다 – mark

+0

나는 똑같은 문제를 안고 있습니다. 텍스트 뒤에 색상을두면 브라우저가 텍스트를 정상 위치에 '렌더링'하고 나서 위로 움직여서 공간이 생기는 것을 볼 수 있습니다. 롤오버에 그림자가 있어야 작동하지 않습니다. – niico

1

달성하기위한 한 가지 방법은 div를 다른 문서 내부에 넣는 것입니다. absolute 'div에 배치하여 문서 흐름에서 벗어나게하십시오.

+0

'z-index'로 무엇을 달성했는지 확신 할 수 없습니다. 나는 그 규칙을 해제해도 아무런 변화가 없을 것이라고 확신합니다. IIRC, 부정적인'z-index''는 인쇄 할 때 내용을 숨 깁니다. – raveren

+0

사실 Z-index = -1 일 때, 꼬리말이 몸 뒤에서 반으로 나타나게하고 싶습니다. 그래서 마치 내 꼬리말이 몸 뒤에서 시작하여 페이지 끝까지 계속 보이는 것처럼 보입니다. – noobcode

+0

I * think * z-index는 인쇄 케이스를 제외한 양수 값으로 만 작동합니다. 어쨌든, 당신은'절대'해결책을 시도 했습니까? – raveren

6

하단의 "추가"공간은 바닥 글이 차지할 공간입니다. 상대적으로 배치 된 요소는 비록 다른 곳에 나타나더라도 페이지의 레이아웃 흐름에서 동일한 공간을 차지합니다.

본체에 음수 여백을 넣을 수 있습니다. 바닥 글에 top: -60px;이 필요 없다는 것을 알 수 있습니다.

+0

나는 그것을 시험해 보았지만 몸이 아래로 떨어졌다. 바닥 글로 인한 추가 공간이 여전히 존재합니다. 답장을 보내 주셔서 감사합니다. – noobcode

+1

흠. 바닥 글의'top : -60px'를'margin-top : -60px'로 바꾸는 것은 어떨까요? 이는 문서 흐름과 바닥 글의 위치에 영향을 미쳐야합니다. (나는 당신의 바닥 글이 60 픽셀의 높이라고 가정하고 있습니다.) –

1

질문에 대한 직접적인 대답은 아니지만 주 콘텐츠 뒤에 표시하려는 내용에 따라 아마 가짜 일 수 있습니다.

이미지 인 경우 html {} 또는 body {} (또는 모든 콘텐츠를 캡슐화하는 div)에 넣고 하단에 맞출 수 있습니다. 당신이 필요로하는 부분에 대한

position: relative; 
top: -60px; 

을하지만 옆에 나타납니다 섹션

margin-top: -60px; 

설정 :

+0

감사합니다. jeroen 답장을드립니다. – noobcode

3

당신은 여전히 ​​사용할 수 있습니다. 이 경우 - 바닥 글.

0

이 또 다른 솔루션입니다 :

z-index: -1; 
position: relative; 
top: -60px; 
margin-bottom: -60px; 

위에 여분의 여백과 여백 하단이 시간 태그 어떤 이유로

만이 나를 위해 일한 제거 만듭니다. 음수 마진 - 상단 doesnt 작업