2013-12-15 6 views
0

이 테스트 URL은 다음과 같습니다. http://effectwave.com/test/responsive/viewport/index-test.htm 내용 영역 (파란색 영역)이 바닥 글 영역으로 이동해야합니다. 그러면 '바닥 글 콘텐츠'라고 표시된 곳이 그에 따라 푸시 다운됩니다.CSS Z- 인덱스 및 절대 위치 지정

저는 이것이 z- 인덱스와 절대 위치 지정에 의해 달성 될 수 있음을 알고 있습니다. 나는 아무 소용이 그것을 시도하고 나는 그것을 벗을 전문가가 아닙니다. 누군가 제발 도와 줄 수 있니?

답변

0

다음 중 원하는 것을 수행합니까?

.wrapper { 
    position: relative; 
    z-index: 10; 
} 
footer { 
    margin-top: -430px; 
} 
.footer-content { 
    padding-top: 440px; 
} 
+0

도움 주셨습니다. 이것은 좋은 출발점입니다. 숫자를 가지고 놀고 원하는 결과를 얻을 수 있습니다. 하지만이 책을 처음 접한 이후로 여기서 정확히 무슨 일이 일어 났는지 설명해 주시겠습니까? – user3104483

+0

'z-index : 10'과'position : relative'는 wrapper가 다른 것들 위에 놓여 지도록 보장합니다. 음수'margin-top'은 바닥 글을 위로 이동시켜 래퍼 아래에 놓이게합니다. 그러나 이것은 또한이 텍스트가 래퍼 아래 놓여 있음을 의미합니다. 'padding-top'은 상단에 여분의 빈 공간을 생성하여 바닥 글의 텍스트를 다시 볼 수있는 곳에 푸시 다운합니다. – towr

관련 문제