(CSS) Position

Mirrer·2022년 4월 29일

CSS

목록 보기

5/15

Position

문서 상에 요소를 배치하는 방법을 지정

CSS position 속성은 top, right, bottom, left속성값을 사용해 요소를 배치할 최종 위치를 결정한다.

즉 position은 원하는 요소들을 원하는 위치에 자유롭게 이동시키 위해 사용하는 속성이다.

position속성 사용시 Type(position의 종류) → 기준점(이동시킬 기준)을 주의해서 사용해야 한다.

Position의 종류

static
relative
absolute
fixed

Static

Position: static은 모든 요소의 기본 position값이다.

Relative

Position: relative는 자기 본래위치를 기준점으로 상, 하, 좌, 우로 이동한다.

float와는 다르게 자신의 본래위치를 기억하고 있음으로 부모, 형제요소들의 변동이 없다.

.red {
  position: relative;
  /* 자신의 위치를 기준으로 위쪽에서 20px이동 */
  top: 20px;
  /* 자신의 위치를 기준으로 오른쪽에서 40px이동 */
  right: 40px;
}

Absolute

Position: absolute는 부모 요소들 중 기준점을 선택하여 원하는 위치로 요소를 이동한다.

부모 요소 선택기준은 부모의 position이 static이 아닌 요소이다.

만약 모든 부모 요소들의 position이 static이 아니라면 가장 가까운 부모를 기준점으로 선택한다.

Absolute와 Float

absolute와 float는 비슷해보이지만 뚜렷한 공통점과 차이점이 있다.

공통점

해당요소가 붕 뜬 이후에 부모와 형제요소가 영향을 받는다.
사용 후 해당요소는 block으로 변화하여 width, height, top, bottom사용 가능
block으로 변하지만 남은여백은 margin으로 채우지 않는다.

차이점

float는 inline요소들이 감지해서 피해다녔지만 absolute는 inline요소들이 감지하지 못해 의식하지 않고 화면에 나타난다.

.parent {
  position: relative;
}

.child1 {
  position: absolute;
  /* parent의 position은 static이므로 값을 relative로 
		 변경한 뒤 parent를 기준으로 이동 */
  top: 20px;
  left: 40px;
}

.grandparent {
  position: relative;
}

.parent {
  position: static;
}

.child1 {
  position: absolute;
  /* parent의 position은 static이므로 grandparent를 기준으로 이동 */
  top: 20px;
  left: 40px;
}

.grandparent {
  position: relative;
}

.parent {
  position: relative;
}

.child1 {
  position: absolute;
  /* 모든 부모의 position이 static이 아니므로 가장 가까운 parent를 기준으로 이동 */
  top: 20px;
  left: 40px;
}