position 위치 지정 요소를 사용하여 위치를 정확하게 px 단위로 지정하자.
Position
문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.
top과 bottom 동시 지정 : top이 우선 적용 된다.
left와 right 동시 지정 : ltr이면 left 우선 적용. rtl이면 right 우선 적용.
사용하는 방법을 알아보자.
위치 지정 요소
static 값이 아닌 모든 속성 값.
static
요소Element
를
기본 흐름normal flow
에 따라 배치한다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다. 기본 값.
상대 위치 지정 요소
relative 값. top과 bottom은 원래 위치에서의 세로축 거리를, left와 right은 원래 위치에서의 가로축 거리를 지정한다.
relative
요소Element
를
기본 흐름normal flow
에 따라 배치한다. 선택한 요소를 기준으로 top, right, bottom, left의 값에 위치가 지정된다.
절대 위치 지정 요소
absolute, fixed 값. top, right, bottom, left는 요소의 상위 요소를 기준으로 거리를 지정한다.
absolute
요소Element
를
기본 흐름normal flow
에서 제거한다. 레이아웃에 공간도 배정하지 않는다. 상위 요소 기준으로 상대적으로 배치한다. 상위 요소에 위치 지정 요소가 없다면 최 상단의 컨테이너 요소를 기준으로 상대적으로 배치한다.
fixed
요소Element
를
기본 흐름normal flow
에서 제거한다. 레이아웃에 공간도 배정하지 않는다. 대신 뷰포트의 최 상단의 컨테이너 요소를 기준으로 상대적으로 배치한다. 단, 선택한 요소의 상위 요소 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 상위 요소 기준으로 상대적으로 배치한다. perspective와 filter의 경우 브라우저별로 결과가 다르다. 이 페이지를 인쇄할 때는 선택한 요소가 모든 페이지의 같은 위치에 출력된다.
끈끈한 위치 지정 요소
sticky 값. 상위 요소에 top 속성 등을 이용하여 고정시킬 수 있다. 스크롤 해도 상위 요소가 보이는 동안 계속 선택한 요소를 보여준다.
sticky
요소Element
를
기본 흐름normal flow
에 따라 배치하고 상위 요소에서 배치한 위치에 계속 고정되어 보이게 배치한다.
기본
기본 예시
CSS
div {
position: relative;
max-width: 100%;
}
.top {
background-color: #DFD6D2;
width: 100px;
height: 100px;
z-index: 1;
}
.bottom {
border: 1px solid #AAA;
width: 1000px;
height: 150px;
position: absolute;
top: 20px;
left: 20px;
}
HTML
<div> <div class="top"></div> <div class="bottom"></div> </div>
사용된 코드 설명
position: relative;
:
이 요소의 상대 위치로 하위 요소 위치 지정한다.
max-width: 100%;
:
최대 width 100%로 설정한다.
z-index: 1;
:
Z축 기준으로 위로 1만큼 올라오게한다.
position: absolute;
:
상위 요소를 기준으로 절대 위치 지정한다.
top: 20px; left: 20px;
:
위쪽에서 20px, 왼쪼에서 20px 이동한다.
응용
기본 예시
CSS
dt, dd {
padding: 12px 0 12px 12px;
margin: 0;
}
dt {
background: #DFD6D2;
border: 1px solid #CCC;
color: #FFF;
font-weight: bold;
font-size: 1.5rem;
position: -webkit-sticky;
position: sticky;
top: 0;
}
dd {
font-size: 1rem;
}
dd + dd {
border-top: 1px solid #CCC;
}
HTML
<dl> <div> <dt>Color on Me</dt> <dd>Intro (Through the night)</dd> <dd>뭐해 (What are you up to)</dd> <dd>I HOPE</dd> <dd>Color</dd> <dd>Horizon</dd> </div> <div> <dt>CYAN</dt> <dd>Adulthood</dd> <dd>Jealous</dd> <dd>TOUCHIN'</dd> <dd>2U</dd> <dd>Interview</dd> </div> <div> <dt>MAGENTA</dt> <dd>Flash</dd> <dd>깨워</dd> <dd>Movie</dd> <dd>Waves</dd> <dd>Runaway</dd> <dd>밤</dd> </div> <div> <dt>YELLOW</dt> <dd>Digital</dd> <dd>Misunderstood</dd> <dd>Save U</dd> <dd>PARANOIA</dd> <dd>Antidote</dd> </div> </dl>
사용된 코드 설명
position: -webkit-sticky; position: sticky;
:
position을 sticky로 설정한다.
top: 0;
:
상위 요소의 top 0에 배치한다.
참고
MDN Web Docs - position
공부 목적 블로그