포지셔닝 레이아웃

포지셔닝(Positioning) 레이아웃

  • 포지셔닝은 웹브라우저가 렌더링하는 기본 레이아웃 흐름(Normal Layout Flow)을 재정의하여 흥미로운 효과를 만들어 낼 때 사용한다.

  • 예를 들어 기본 레이아웃 흐름에서 레이아웃 내부 일부 요소의 위치를 조정하려면 포지셔닝을 사용하여 조정할 수 있다.

  • 페이지의 다른 부분 위에 떠있는 UI 요소를 만들고 싶거나, 페이지의 스크롤과 상관없이 항상 브라우저 창의 동일한 위치에 자리한 UI요소를 만들고자 한다면 포지셔닝을 사용한다.

포지셔닝 레이아웃 유형

정적(static) 위치 (기본 값)

문서의 흐름에 맞춰 배치

상대(relative) 위치

이전 요소에 자연스럽게 연결해 배치, 위치 조정 가능

  • 자신의 위치를 기준으로 한 상대위치 값을 지정한다. (t r b l)

  • <float> 요소와 다르게 자신의 원래 위치를 기억하고 그 위치를 기준으로 이동한다.

  • <position>을 사용해서 요소가 부모 영역을 벗어나게 된다면 <overflow: hidden>을 사용해서 벗어난 영역을 감출 수 있다.

.box-group {
  overflow: hidden;
}
/* 상대(relative) 위치 설정 */
.box.is-blue {
  position: relative;
  top: 30px;
  right: -100px;
  z-index: 1;
}

.box.is-yellow {
  position: relative;
  top: -30px;
  left: 40px;
  z-index: 3;
}

.box.is-green {
  position: relative;
  bottom: 300px;
  left: 20px;
  z-index: 2;
}

절대(absolute) 위치

원하는 위치 배정

  • 스크롤을 내리면 사라짐

  • 많이 사용되는 기술

부모요소 안에서 위치를 조정하고 싶다면?

부모를 설정해준다, 자신을 포함하는 가장 가까운 부모 중에 포지션 값이 설정되어 있는(기본값인 <static>이 아닌 값)것을 부모로 인식을 한다.

<absolute>를 자식요소로 설정했을 때

주로 <relative>를 부모요소로 사용해준다. 만약 부모가 <absolute>라면 위치를 지정할 수 있게 된다. 원래 자신이 가지고 있던 공간을 아래요소가 인식을 못하기 때문에 아래요소는 위로 올라오려는 성질을 보여준다. 결국 레이아웃이 무너지는 형태가 나타난다.

/* 절대(absolute) 위치 설정 */
.box.is-yellow {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
}

.box.is-green {
  position: absolute;
  top: 0;
  right: 0;
}

.box.is-blue {
  position: absolute;
  top: 0;
  right: 0;
}
.box-group {
  position: relative;
}

<relative>와 <absolute>의 차이

  • <relative>은 원래 박스가 가지고 있는 공간을 그대로 지키며 위치 이동을 했다면 <absolute>는 마치 <float>처럼 자신의 공간을 뒤에 나오는 요소로 하여금 인식하지 못하게끔 한다. 그리고 그 위치를 다른 요소가 차지하게 된다.

<float>와 <absolute>의 차이

  • <float>는 단순히 좌/우로만 이동한다면 <absolute> 페이지 내에서 자유롭게 배치 조정이 가능하다.

고정(fixed) 위치

지정한 위치에 고정

[박스 안에 스크롤이 생기게 된다.] .box-group {
  overflow: auto;
}

/* 스크롤 길이 */
.box-wrapper {
  height: 1600px;
}

<absolute>와 <fixed>의 차이

  • <absolute>는 부모를 찾는다 그리고 부모 내에서 위치를 조정 할 수 있다. 만약 자신을 포함 하는 가장 가까운 부모들이 모두 포지션 값을 갖고 있지 않는다면(모두 <static>값을 가진다면) 자신의 최종 부모는 뷰포트가 된다.

  • <fixed>는 부모를 찾지 않고 무조건 사용자가 보는 화면단(뷰포트)를 기준점으로 고정이 가능해진다.

.box.is-yellow {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
}

* 위의 절대 위치에 있던 yellow 박스를 fixed로 속성을 덮어쓰려고 한다. 
/* 고정(fixed) 위치 설정 */
.box.is-yellow {
  position: fixed;
  top: initial;
  left: 0;
  bottom: 0;
}
* 절대 위치 설정의 top값이 0으로 설정되어 있어서 bottom 속성이 적용이 안됐었다. 
그럴땐 Initial을 적용해서 top속성을 초기화 시킨다.

달라붙는(sticky) 위치

뷰포트에서 설정한 위치에 왔을 때 그 위치에 달라붙게 된다.

인터넷 익스플로어 미지원.(단, 자바스크립트를 사용해서 9이상의 버전에서 지원 가능)

/* 달라붙는(sticky) 위치 설정 */
.box-group .box {
  position: sticky;
  outline: 3px solid red;
  top: 0;
  margin-bottom: 100px;
}

  • static 속성을 제외한 나머지는 좌표를 이용하여 위치를 조절할 수 있다.

<z-index>

  • 요소들의 수직 위치를 조정. 값은 정수이다. 숫자가 클 수록 위로 올라오고 숫자가 작을 수록 아래로 내려간다.

  • 만약 각각 다른 요소들에 z-index값을 같게 했을 때, 코드 상 나중에 입력한 것일 수록 위로 올라온다.

  • 값을 10, 100단위로 설정해야 작업을 수월하게 할 수 있음

  • z-index 블로그 글 참고

참고

Previous플로팅 레이아웃Nextposition 복습겸 다시 정리

Last updated