css. 포지션(Position)

CSS 포지션(Position) 

 

 

모든 태그들은 position: static이라는 디폴트 상태를 갖는다.

차례대로 왼쪽>오른쪽, 위>아래로 쌓인다.

 

 

 

position

static	default
relative	static을 픽셀만큼 이동시킴 (top,right,bottom,left 속성 有)
absolute	static이 아닌 포지션의 조상을 기준으로 정렬 (없을시 body)
fixed	스크롤을 내려도 위치 고정되게

 

 

 

---

 

 

 

relative

 

태그의 위치를 살짝 변경하고 싶을 때, position: relative를 사용한다.이제 top, right, bottom, left 속성을 사용할 수 있다.

 

relative는 각 방향을 기준으로 태그 안쪽 방향 으로 이동한다.(바깥쪽으로 이동하고 싶다면? 음수의 값을 주자.)

 

.top {
  position: relative;
  top: 5px;
  z-index: 1;
}

.right {
  position: relative;
  right: 5px;
}

.bottom {
  position: relative;
  bottom: 5px;
}

.left {
  position: relative;
  left: 5px;
}

cr: www.zerocho.com

 

분명 top: 5px 을 주었는데 아래로 이동했다.relative는 태그 안쪽 방향으로 이동하므로.

 

+) top이 left보다 위에 있는 이유원래는 같은 position이면 나중에 나온 태그가 위로 배치된다.그러나, z-index 속성을 더 놓게 해주어서 위로 올라간 것.

z-index
태그가 겹칠때 누가 더 위로 올라가는지 결정.
기본값: 0 (클수록 위로 배치된다.)

위 예제에서는 top이 index를 1을 주었으므로 기본값인 0보다 커서 위로 간것.

z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */

 

 

 

---

 

 

 

absolute

 

relative가 static을 주어진 픽셀만큼 움직였다면,absolute는 position: static 이 아닌 조상을 기준으로 움직인다.(즉, relative, absolute, fixed인 태그)

 

만약 위중에서 없다면 가장 위의 태그(body)가 기준이 된다.

 

 

이 또한 먼저 position: absolute를 하고나서left, right, top, bottom 속성을 이용하면 된다.

 

 

 

---

 

 

fixed

 

스크롤을 내려도 항상 같은 자리에 있도록 - fixed로 설정함.

 

 

 

 

 

 

❗❗ 주의!

absolute와 fixed를 적용하면
더이상 div가 width : 100%가 아니다! (한줄을 다 차지하는 것이 X)

width: 100%가 아님

 

 

---

Ref.

position - CSS: Cascading Style Sheets | MDN

 

위치잡기 - Web 개발 학습하기 | MDN

(CSS) CSS 포지션(position) - static, relative, absolute, fixed