[[ body ]]

position이 fixed인 경우, 컨테이닝 블록은 뷰포트나 웹페이지 영역이 된다: 아래 p 문단의 position 값이 fixed이므로 컨테이닝 블록은 초기 컨테이닝 블록(화면상으로는 뷰포트)이고, 따라서 그 위치와 모양은 브라우저 창의 변동에 맞춰 달라지게 된다!

[ Section ]

여기서는 이 p 문단의 position 값이 fixed이므로 컨테이닝 블록은 초기 컨테이닝 블록(화면상으로는 뷰포트)이고, 따라서 이 문단의 위치와 모양은 브라우저 창의 변동에 맞춰 달라지게 된다:

☞ 화면 너비나 높이를 변경해보세요.. 

            
                
            
        
            
                body { margin: 0 auto; max-width: 800px; background-color: beige; border: 5px dotted gray; }

                section { margin: 0 auto; max-width: 600px; height: auto; background: lightgray; }
                p.fixed-p { width: 50%; height: auto; margin: 2%; padding: 2%; background: rgb(142, 185, 185); }

☞ 화면 너비나 높이를 변경해보세요.. 스크롤도 해보세요