Position
- 요소를 원하는 위치로 자유롭게 이동시키기 위해 사용하는 속성
- 종류 :
static,relative,absolute,fixed,sticky
📍 Position 속성값
▪️ static : position 프로퍼티의 기본값으로, 부모 요소 내에 자식 요소로서 존재할 땐 부모 요소의 위치를 기준으로 배치된다.
▪️ relative : 요소가 처음에 존재했던 위치를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동한다.
▪️ absolute : position: static이 아닌, 즉 position이 relative, absolute, fixed인 부모 요소 또는 조상 요소중 선택하여 해당 요소를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용해 위치를 이동한다. 따라서 부모 요소를 기준으로 위치를 이동할 경우, 해당 부모 요소에 position: relative를 선언해야 한다.
✔️ 부모, 조상이 모두 static인 경우에는 document body를 기준으로 위치하게 된다.
✔️position: absolute를 선언하면 자동으로 block 요소가 된다. (display: block)
▪️ fixed : 부모요소와 관계없이 viewport를 기준으로 위치가 고정된다. 따라서 스크롤을 해도 요소의 위치는 변하지 않고 화면에서 사라지지 않는다. 그리고 fixed로 선언할 경우, 부모 요소의 전체 너비로 채워지는 일반적인 블록 요소와 달리, 인라인 요소와 같이 width가 컨텐츠의 너비에 따라 자동으로 조정된다. 따라서 position: fixed를 사용할 땐 적절한 width를 지정해줘야 한다.
위 예시를 보면 섹션1부터 섹션2까지 스크롤을 내리는 동안, position: fixed, bottom: 0이 적용된 fixed-element가 화면 하단에 계속 고정되어 있는 것을 확인할 수 있다.
▪️ sticky : relative와 fixed의 특성이 합쳐진 속성으로, 스크롤 위치에 따라 동적으로 변경된다. 일반적인 상황에서는 relative처럼 동작해 요소가 원래 위치에서 움직이지만, 특정 스크롤 위치에 도달하면 fixed처럼 화면에 고정되어 움직이지 않게 된다.
✔️
sticky속성은 요소가 속한 부모 요소 내에서만 동작한다.
✔️ 부모 요소에height값이 지정되어 있어야 sticky가 제대로 동작하고, 부모 요소 높이 범위 내에서만 고정된다.
✔️ 부모 요소에overflow속성이 hidden, auto, scroll로 지정되어 있으면sticky가 정상적으로 작동하지 않는다.
위 예시에서 두 번째 섹션의 h1 태그에 position: sticky; top:0;를 작성하고 확인해보니, 스크롤하다가 두 번째 섹션에 도달했을 때, 두 번째 섹션의 h1 태그의 상단이 뷰포트 상단에 닿아 고정되는 것을 확인할 수 있다. h1 태그의 부모 요소는 section2로, 섹션2 범위를 벗어나고 섹션 3를 스크롤하게 되면 h1이 부모요소에서 벗어났기 때문에 section2의 h1이 상단에 고정되지 않는 것을 확인할 수 있다!
📍 position 속성값 요약
- 기본 위치 :
static - 원래 위치를 유지하면서 조금씩 이동해야한다 :
relative - 아예 다른 위치로 옮겨야한다 :
absolute - 뷰포트 기준으로 이동해야한다 :
fixed - 스크롤 위치에 따라 변경되어야 한다 :
sticky
📍 z-index
- 스택 순서를 설정하는 속성으로 요소의 z축 위치를 지정한다.
z-index의 값이 높을수록 다른 요소 위로 쌓이게된다.z-index속성은position: static이 아닌 요소에만 적용된다.
박스 3개를 만들고, 빨간색, 파란색, 주황색 박스 각각의z-index를 2, 1, 3으로 지정하였다. 따라서 z-index 값이 가장 높은 주황색 박스가 가장 상위에 있는 것을 확인할 수 있고, 그 다음으로 값이 높은 빨간색 박스가 주황색보다는 아래, 파란색보다는 위에 위치하고,z-index값이 가장 낮은 파란색 박스가 가장 아래에 위치하는 것을 볼 수 있다.
📍 관련 실습
1. 프로필
- 프로필 이미지와 이름에
float: left지정해 가로정렬 + 가상요소 활용해 clearfix 선언
/* 레이아웃 붕괴 막기 위한 clearfix */
.user-card::after{
content: '';
display: block;
clear: left;
}
.user-photo,
.user-name{
float: left;
}position을 활용한 프로필 이미지와 접속활성화 아이콘 배치
.user-photo{
position: relative;
}
.user-status{
position: absolute;
right: -2px;
bottom: -2px;
border-radius: 50%;
}✔️ 이미지는 기본적으로 display: inline이지만 width, height 값을 지정할 수 있는 예외의 경우이다! 명시적으로 표현하기 위해 display: block 정의해주는 것을 권장한다!
2. 상품 정보
position속성 활용하여 이미지 위에 캐러셀 화살표 배치
✔️ 화살표 위치를top: 50%으로 하면 이미지 중앙 지점을 시작으로 화살표 이미지가 배치되기 때문에transform: translateY(-50%);을 통해 화살표 길이의 절반만큼을 위로 올려줘야 제대로 중앙에 맞게 배치됨 주의! (자신의 height 값의 절반만큼 y축으로 올린다.)
.card-carousel{
position: relative;
}
#prev,
#next{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#prev{
left: 0;
}
#next{
right: 0;
}- 상품 이미지가 부모 컨텐츠 길이만큼(card) 너비를 갖게 하기 (이미지 사이즈 조정할 때 자주 사용되는 코드)
.card-carousel img{
display: block;
width: 100%;
height: auto;
}3. 모달
- 모달 화면 정중앙 배치하기 (뷰포트 기준)
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}- 텍스트 가운데 정렬하기 (block요소 안의 inline 요소들은
text-align으로 정렬 가능)
.input-group{
text-align: center;
}position활용해 모달 닫기 버튼 우측 상단 배치하기
✔️ 부모 요소인.modal에position: fixed가 이미 지정되어 있기 때문에 따로relative를 정의해줄 필요가 없다!
.close-button{
position: absolute;
top: 8px;
right: 8px;
}참고 사이트
