부동 div 위치 지정

Question

페이지 아래쪽 정확히 20px로 나타나려면 부동 사각형 (100 % 너비, 100px 높이)이 필요합니다. 어떻게해야합니까?

아래 코드는 페이지가 아닌 브라우저 창의 하단에있는 사각형을 보여줍니다. 따라서 페이지가 화면에 들어갈 수있는 것보다 크면 사각형이 페이지 중간에 나타납니다.

<div style="z-index: 1; position: absolute; right: 0px; bottom: 20px; background-color: #000000; width: 100%; height: 100px; padding: 0px; color: white; ">&nbsp;</div> 

Answer 1

사각형 div의 부모에 position: relative;을 추가하십시오. 그러면 div 요소가 상위 요소의 맨 아래에서 20 픽셀 위치합니다. @ Laxman13에 의해 제안

Answer 2

Live Demo

• , 당신은 "부동 직사각형"의 부모에 position: relative를 추가해야합니다. 이 경우 해당 부모는 단지 body 요소입니다.
• Read this/this/thisposition 속성을 이해하는 데 도움이됩니다.

HTML :

<div id="floatingRectangle">Hi.</div> 

CSS :

body { 
    position: relative 
} 
#floatingRectangle { 
    z-index: 1; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 20px; 

    height: 100px; 

    background-color: #000; 
    color: white; 

    padding: 0; 
}