05. CSS Positioning (position 속성)

○ Positioning (포지셔닝, 레이아웃)

    - 브라우저 화면 안에 박스 형태의 각 콘텐츠를 원하는 위치에 배치 하는 것

    - 수평, 수직, 그리드 방향으로 배치할 수 있다

 

○ Position 속성

    - 형식 : position: static | relative | fixed | absolute | sticky ;

    - top, right, bottom, left 속성으로 위치를 지정 (상하좌우 여백으로 위치 조정)

 

○ 부모·자식 구조 (=Tree구조)

    - 부모(Parent) : 상위에 하위 요소를 감싸고 있는 요소

    - 자식(Child) : 하위에 있는 요소

 

○ Position : static

    - 문서의 흐름에 맞춰 배치 (가장 기본)

    - 수직으로만 배치 (top, right, bottom, left, z-index이 영향없음)

 

○ Position : absolute

    - 절대적 위치

    - 부모 요소를 기준으로 위치 결정 (이동시키면 내 자리가 사라짐)

    - 기준이 되는 부모 요소가 relative여야 한다 (부모가 relative가 아닐때는 가까운 조상 요소가 기준)

    - 문서의 흐름에서 제거

 

○ Position : relative

    - 상대적 위치

    - 자기 자신을 기준으로 위치 결정 (이동해도 내 자리가 살아 있음)

    - 문서의 흐름에 맞춰 배치

    - 보통 부모를 relative, 자식을 absolute로 지정

 

○ Position : fixed

    - 고정 위치

    - 브라우저 창을 기준으로 위치 결정

    - 문서의 흐름에서 제거

<style>
    #s1 li:nth-child(1) {background-color: goldenrod;
                         position: fixed;
                         height: 80px;
                         width: 100%;
                         bottom: 0;}

    #s1 li:nth-child(2) {background-color: darksalmon;
                         position: fixed;
                         height: 100%;
                         width: 100px;
                         top: 0;
                         right: 0;}
</style>

<section id="s1">
    <h3>position:fixed</h3>
    <ul>
        <li>position: fixed(bottom:0; 화면 하단 고정)</li>
        <li>position: fixed(top:0; right:0; 화면 우상단 고정)</li>
    </ul>
</section>

 

○ Position : sticky

    - 붙임 위치

    - 가장 가까운 스크롤 되는 조상을 기준으로 위치 결정

    - 문서의 흐름에 맞춰 배치

<style>
	#header {height: 70px; 
            width: 100%; 
            background-color: burlywood; 
            position: sticky; 
            top: 0;
            }
</style>

<header id="header">
    <h1>position: sticky</h1>
</header>