CSS - Position 속성

Position 속성

• Position이란, 요소의 위치 지정 방법의 유형을 설정하는 속성이다.
• 속성 값으로는 static / relative /absolute / fixed 가 있다.

1. relative

relative는 위치를 이동시켜주는 top, left, right, bottom의 값에 따라 오프셋을 적용한다. top, left, right, bottom의 값은 혼자서는 이동하지 않으며 position이 있을 때만 적용된다.

.position-box {
  background: blue;
  position: relative;
  top: 20px;
  left: 20px;
}

position:relativ과 동시에 top과 left에 값을 주니 이동한 것을 볼 수 있다.

2. absolute

absolute는 부모에 해당하는 박스 기준으로 이동할 수 있다. 이는 position: absolute;일 때 html상에서 해당 element와 관계가 있는 element를 살펴보고 이에 상응하여 position이 결정된다. 부모 중 position에 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 움직이게 된다. 일반적으로 absolute를 쓸 경우, 절대적으로 움직이고 싶은 부모에게 position: relative; 를 부여하면 된다.

.position-box {
  background: blue;
  position: absolute;
  top: 20px;
  left: 20px;
}

3. fixed

fixed는 창을 기준으로 고정 레이어를 만들 때 사용한다. 스크롤이 되어도 브라우저 기준으로 항상 같은 곳에 위치하게 된다. 브라우저 화면(body)를 기준으로 위치를 설정한다.

.position-box {
  background: blue;
  position: fixed;
  top: 0px;
  left: 0px;
}

4. Static

static은 position을 지정하지 않았을 때와 같다. 기본적으로 위에서 아래로, 왼쪽에서 오른쪽 순서에 따라 배치되며 부모 요소가 있다면 부모 요소의 기준으로 배치된다.

• css