컨테이닝 블록(3)

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

[ Section ]

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

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

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

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

2. 한편, position이 absolute나 fixed인 경우, transform이나 filter 등의 가장 가까운 조상요소의 내부 여백 영역이 컨테이닝 블록이 될 수도 있다!

[ Section ]

한편, position이 absolute나 fixed인 경우, transform이나 filter 등의 가장 가까운 조상요소의 내부 여백 영역이 컨테이닝 블록이 될 수도 있다:

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

                section {
                    margin: 0 auto; max-width: 900px; height: auto; background: lightgray;
                } p.absolute-p {
                    width: 75%; height: auto; padding: 8px; background: rgb(142, 185, 185);
                }

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

[[ body ]]

[ Section ]

[ Section ]