CSS - position : absolute 를 이용한 div 위치 지정

CSS - position : absolute 를 이용한 div 위치 지정

 

position은 태그들의 위치를 결정하는 css이다. 기본적으로 div 정렬 시키는 방법은 다양하지만 position을 이용하게 되면 내가 원하는 위치에 어디든 정확히 위치 시킬 수 있다. 글로만 설명하면 이해가 쉽지 않아 아래 그림을 통해 알아본다.

 

기본적으로 모든 태그들의 디폴트값은 static 상태이며 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

position : absolute

position: absolute;

포지션 값을 absolute로 주게 되면 position 값이 static 속성이 아닌 relative, absolute, fixed인 부모 태그를 기준으로 기준점을 삼는다. 만약  relative, absolute, fixed 값을 가지는 부모 태그가 없다면 가장 위의 태그인 body가 기준이 된다.

 

아래 예시는 body태그를 기준으로 삼는다. 아래 표시된것과 같이 최종적으로 정중앙에 위치해보려한다.

이동을 하기위해서는 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능하다.

top과 left속성을 50%씩 주게 되면 다음과 같이 변한다. 두선이 만나는 지점이 50% 50% 인 지점이 되어 그 지점을 기준으로하여 div가 생성된다. 하지만 우리가 원하는 것은 바로 정중앙에 위치시키는 것이다.

position: absolute;
top: 50%;
left: 50%;

 

정중앙에 위치 시키기 위해 transform 을 이용하여 div 요소의 사이즈만큼 반대로 이동을 시켜주면 된다.

위에서도 알수 있듯이 양수로 입력시에는 오른쪽과 아래쪽으로 이동하게 되니 이번에는 음수 값을 넣어주어 왼쪽과 위로 이동을 시켜주면 된다.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

이 방법을 응용을 하여 가운데 상단에 중앙 정렬을 하려면 top에 주었던 50%를 지우고 transform에 주었던 값을 0%로 바꿔주게 되면 다음과 같이 응용이 가능하다. 

position: absolute;
left: 50%;
transform: translate(-50%, 0%);

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."