Positioning

position

• 요소의 위치 지정 방법의 유형(기준)을 설정할 수 있다.
• 속성 top / bottom / left / right 는 position이 지정되었을 때만 사용이 가능하다.
• absolute, fixed 속성값이 적용된 요소는 display 속성이 대부분 block 으로 수정된다.

 

값	의미	기본값
static	유형(기준) 없음/ 배치 불가능	static
relative	요소 자신을 기준으로 배치
absolute	위치상 부모 요소를 기준으로 배치
fixed	브라우저(뷰포트)를 기준으로 배치
sticky	스크롤 영역 기준으로 배치

 

relative

자기 자신을 중심으로 위치를 움직인다.

위치이동이 진행되었지만, 3번 박스의 위치는 변하지 않았다.

이는 2번 박스가 본래의 자기 위치에 남아있기는 하지만 홀로그램처럼 이동한 것만 보이는 것을 뜻한다.

이처럼 relative를 통해 위치중심을 잡게 되면 자기 자신을 기준으로 하다 보니 주변의 형제 요소에 영향을 받게 된다.

따라서 relative를 통해서 요소를 배치하는 행동은 주변에 영향을 받거나 주기 때문에 조심해서 사용해야 한다. (대부분의 경우 absolute를 사용한다.)

 

absolute

absolute에서 위치상 부모 요소 기준은 HTML 문서 구조상 부모 요소를 뜻하는 것이 아니다.

위치상의 부모 요소를 지정해줄 때에는 position 을 무조건 작성해주어야 한다.

*static의 경우에는 기본 값으로 기준이 없음을 의미하므로 이를 제외한 나머지를 작성해주면 된다. (position: static 제외)

• top: 50px, left: 50px 이라고 작성했을 때 부모 요소 기준으로 이동한다면 보라색으로 그린 박스 위치에 있어야 될 것으로 생각될 것이다. 하지만 박스의 위치는 2번 박스의 위치는 위와 같았다. 이는 브라우저의 뷰포트를 기준으로 배치 되었기 때문이다.
• absolute 속성을 추가하면 1, 2, 3 순서대로 쌓이지 않고 2번은 부모 요소를 기준으로 배치되고, 1, 3번 박스는 2번 박스 아래에 위치하게 된다.
• 위치상의 부모요소란 HTML의 구조와 상관없으며, 위치상의 부모 요소에는 position: xxx 가 부여되어 있어야만 위치상의 부모 요소로서의 가치를 가지게 된다.
• 하지만 위의 경우에는 구조상 parent 에서 position이 기재되어 있지 않아 parent 를 위치상의 부모 요소로 인지하지 못하는 것이다. 부모 요소가 없을 경우 계속 타고 올라가서 뷰포트/윈도우 개체를 위치 상 부모 요소로 인식한다.
• 따라서 위치상의 부모요소로 인식되게 하기 위해서는 parent에 position: relative 를 입력하는 것이다. (만약 position: relative 를 grand-parent 에 입력한다면 위치상 부모요소는 grand-parent 로 인식하게 된다.)

 

fixed

요소의 위치가 브라우저의 뷰포트 기준으로 배치된다.

위치상 부모 요소를 지정하지 않았을 때와 동일하다.

fixed를 이용하면 항상 그 위치에 고정된 상태로 존재하게 된다. (예. 웹사이트의 배너 광고/아이콘 등)

 

sticky

스크롤 영역 기준으로 배치된다.

• IE 지원 불가
• top, bottom, left, right 과 같은 특정한 값이 1개 이상 존재해야 한다.
• 특정한 부여된 값이 스크롤 영역과 맞닿았을 경우에만 동작한다.

.section*8>h1{Title $}

.section {
  height: 200px;
  border: 4px dashed lightgray;
}
.section h1 {
  text-align: center;
  line-height: 2;
  font-size: 24px;
  font-weight: bold;
  position: sticky;
  top: 0;
}

코드를 실행하면 h1에 해당하는 Title이 스크롤이 내려갈 때 상단(top: 0)에 붙어서 고정된 상태로 하나의 section이 바뀔 때 마다 사라지고 다음 상단의 Title2가 나오는 형태이다.

 

요소 쌓임 순서

요소가 쌓여있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 쌓이는지)를 결정 (Z축)

position > z-index > 문서 상 마지막 코드

1. static 을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임 (값은 무관)
2. position 이 모두 존재한다면 z-index 속성의 값이 높을 수록 위에 쌓임
3. position 속성의 값이 있고, z-index 속성의 숫자 값이 같다면, 문서의 마지막 코드일수록 위에 쌓임 (나중에 작성한 코드)

* z-index 는 position 이 존재해야 작동하며, z값이 클수록 사용자와 더 가까운 것을 뜻한다. (더 위에 쌓임)