position
요소의 위치를 지정해주는 기준
속성
- static : 기준없음 (상속등으로 설정된 position 리셋시 사용)
- relative : 요소자신을 기준
- absolute : 위치상 부모 요소를 기준
위치상 부모요소이므로, 기준 부모에 position: relative; 선언 필요 - fixed : 뷰포트 (브라우저) 기준
- sticky : 스크롤 영역 기준
top, bottom, lefr, right, z-index 와 같은 속성들과 같이 사용
실제 적용
<div class = container>
<div class = item>1</div>
<div class = item>2</div>
<div class = item>3</div>
</div>상기와 같이 1개의 container 부모요소안 3개의 item 자식요소.
.container {
width: 300px;
background-color: royalblue;
}
.container .item {
border: 4px dashed red;
background-color:orange;
}
.container .itme:nth-child(1) {
width : 100px;
height: 100px;
}
.container .itme:nth-child(2) {
width : 140px;
height: 70px;
}
.container .itme:nth-child(3) {
width : 70px;
height: 120px;
}위와 같이 style 지정시 아래와 같이 표현
Position 속성값
1. position : relative;
.container .itme:nth-child(2) {
width : 140px;
height: 70px;
position: relative;
top: 50px;
left : 120px;
}2번째 박스요소만 position을 relative로 변경시,
자기 자신 요소를 기준으로 위치가 이동됩니다.
즉, 그림에 2번째 박스위치를 기준으로 위에서 50px, 왼쪽에서 120px 만큼 이동하게 됩니다.
이러한 방식은 3번박스가 붕떠보이는 현상이 나타나 요소 자신을 기준으로 한 방식은 배치의 상황에 맞게 잘 사용해줘야 합니다.
2. position: absolute;
.container {
width: 300px;
background-color: royalblue;
position: relative;
}
.container .itme:nth-child(2) {
width : 140px;
height: 70px;
position: absolute;
top: 30px;
right: 100px;
}위와 같이 2번째 박스를 absolute인 위치상 부모요소 기준으로 배치되므로 기준이 되는 부모요소에 position:relative; 로 지정해야 줘야합니다.
만약 부모요소인 container에 position:static; 으로 지정시
position:relative; 로 선언된 상위의 부모요소를 계속 찾게 됩니다.
만약 position:relative; 선언된 부모요소가 없다면 뷰포트가 위치상 부모요소 기준으로 삼아 정렬될 수 있음을 알아둡시다.
Z-index
요소의 쌓임 정도를 지정
(요소 쌓임 조건에 2번째에 해당, 1번째 조건은 position)
숫자가 높을수록 위에 쌓입니다.
z-index보다 postion의 값이 1번째 조건이므로, position의 속성값을 우선 따릅니다.
( position 값이 static 이라면 position 값이 없음을 의미하기도 합니다. )
.container {
position : relative;
width: 300px;
background-color: royalblue;
}
.container .itme:nth-child(1) {
position : static;
z-index: 3;
width : 100px;
height: 100px;
}
.container .itme:nth-child(2) {
position : absolute;
z-index : 2;
width : 140px;
height: 70px;
v
.container .itme:nth-child(3) {
position : absolute;
z-index : 1;
width : 70px;
height: 120px;
}위와 같이 스타일을 지정했다면,
1번째박스는 position이 static으로 지정되어 있어 z-index를 아무리 높게 설정하더라도 가장 뒷면에 쌓이게 됩니다.
1번째 박스를 position: relative; 로 변경된다면
z-index의 값의 수가 높을 수록 상단에 위치하게 됩니다.
따라서 1번째 박스가 가장 상단에 위치하게 됩니다.
마치며
position 속성의 활용방법에 대해 알 수 있었으며 각 속성별 적용방법에 대해 명확하게 이해할 수 있었습니다.
더불어, z-index를 사용하는 방법에 대해서도 공부할 수 있는 시간이였습니다.
