CSS에서 고정 된 바닥 글 효과 (고정 된 이미지처럼)

Question

this 사이트에서와 같이 바닥 글 효과를 만들고 싶습니다. 내 콘텐츠에 대한 래퍼가 필요한 다음 바닥 글을 추가 할 필요가 있다고 생각합니다. 그러나 문제는이 효과가되지 않습니다

.footer{ 
width: 100%; 
} 

.footer-content{ 
position: fixed; 
bottom: 0; 
width: 100%; 
z-index: 0; 
} 
.content{ 
z-index: 9999 !important; 
background-color: #fff; 
position: relative; 
margin-bottom: 600px; //height of my full footer 
} 

:

<div class="content"></div> 
<div class="footer"> 
    <div class="footer-content"> 
    </div> 
</div> 

그리고 CSS와 같은 : 같은

그래서 구조가 될 것이다. 내 영어를 도와 주셔서 죄송합니다.

Answer 1

이렇게하려면 바닥 글을 고정시키고 그 위에 내용을 스크롤해야합니다.

는 CSS의 대략적인 예는 다음과 같습니다

.content { 
    position: relative; /* required for z-index to work */ 
    z-index: 2;   /* bring above footer */ 
    margin-bottom: 100px; /* the height of the footer */ 
} 


.footer { 
    position: fixed; /* fix in position */ 
    z-index: 1;  /* bring below content */ 
    bottom: 0;  /* anchor to bottom of screen */ 
    left: 0;   /* go full width */ 
    width: 100%;  /* go full width */ 
} 

Answer 2

이 코드

HTML

<div class="content"> 
    <h1>Content</h1> 
</div> 
<div class="footer"> 
    <div class="footer-content"> 
     <h1>Footer</h1> 
    </div> 
</div> 

CSS

.footer{ 
    width: 100%; 
    height: 1px; 
    display: block; 
} 

.footer-content{ 
    bottom: 0; 
    display: block; 
    position: fixed; 
    width: 100%; 
    z-index: 0; 
    background: #f1f1f1; 
} 

.content{ 
    z-index: 9999 !important; 
    background-color: #fff; 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 1500px; 
    margin-bottom: 600px; 
    margin-top: -30px; 
} 

샘플을 확인하시기 바랍니다 Fixed footer effect in CSS