[CSS] position의 fixed, z-index

fixed

fixed는 화면을 기준으로 위치를 잡는다. 따라서 스크롤을 아래로 내려도 fixed로 설정한 엘리먼트는 항상 보일 수밖에 없다. 내비게이션 메뉴들을 fixed를 이용해서 만든다.

z-index

z-index는 엘리먼트들끼리 겹쳐질 때 우선순위를 정해준다. 숫자가 높을 수록 우선순위가 높고, 위에 오게 된다.

    <div style="background-color: brown; width: 500px; height: 500px; position: absolute; top: 0; z-index: 0;"></div>
    <div style="background-color: yellow; width: 300px; height: 300px; position: absolute; top: 0; z-index: 1;"></div>