CSS 배치 position

요소의 위치 지정 기준

position을 통해서 요소의 위치의 기준!을 먼저 정해주고 위치를 설정!

기본값, static : 기준 없음

relative : 요소 자신을 기준

absolute : 위치 상 부모 요소를 기준

fixed : 뷰포트(브라우저)를 기준

top, bottom, left, right, z-index

position과 같이 사용하는 CSS 속성들! 모두 음수를 사용 가능.

요소의 각 방향별 거리 지정

.container .item:nth-child(2) {
    width: 140px;
    height: 70px;
    position: relative;
    /* 여기까지만 써주면 변화가 없음!! */
    top: 30px;
    left: 60px;
    /* 원래 내가 있던 자리에서 top left 만큼 이동*/
}

absolute 사용시 주의 사항

absolute 는 위치 상 부모 요소를 기준으로 배치! 주변 요소와 배치 기준이 바뀌면서 상호작용을 하지 않음. 위치 상 부모, 즉 부모는 static이 아닌 position 기준을 가지고 있어야 한다. 부모 요소 모두가 position 기준이 없을 경우 결국 뷰포트 기준으로 위치함.

.container .item:nth-child(2) {
    width: 140px;
    height: 70px;
    position: absolute; /*구조상 부모가 아닌 위치상 부모이기때문 실제 부모가 postion이 지정이 되어 있지 않으면 body ->html -> 뷰포트 기준이 됨. */
    bottom: 30px;
    right: 60px;
}

fixed 사용시 주의 사항

fixed는 뷰포트(브라우저)를 기준으로 배치. 주변 요소와 배치 기준이 바뀌면서 상호작용이 없어짐.

z-index

요소의 쌓임 정도를 지정

기본값, auto, 0 : 부모요소와 동일한 쌓임 정도

숫자 : 숫자가 높을 수록 위에 쌓임

요소 쌓임 순서(Stack order)

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)
2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
3. 1번 & 2번 조건까지 같은 경우, HTML의 다음(나중에) 구조일수록 위에 쌓임

.container {
    width: 300px;
    background-color: royalblue;
    position: relative; /* 주로 postion : absolute 의 구조상의 부모 요소가 위치상의 부모요소가 될 수 있도록 position값을 */
}
.container .item {
    width: 100px;
    height: 100px;
    border: 4px dashed red;
    background-color: orange;
}
.container .item:nth-child(1) {
    position: relative; 
}
.container .item:nth-child(2) {
    position: absolute; 
    /* 상호 작용이 사라짐*/
    top : 50px;
    left: 50px;
}
/* 2번과 3번 요소를 비교했을 때 2번은 absolute이라는 배치 기준이 있는 반면 3번은 없기때문에 2번이 3번위에 쌓임*/

/* 1번과 2번 요소를 비교했을 때 z-index는 없음. 3번 조건으로 html 구조가 더 나중에 쌓연 2번 요소가 위에 쌓임*/

absolute, fixed 사용 시 주의 할 점 : display 속성이 block으로 변경됨

block 요소로 바꾸기때문에 width, height 값이 적용됨.