position의 속성

 

 

 

css position relative absolute 정리

 

 

 

1. postion 속성이란?

 

html로 문서를 작성할때 문서안의 컨텐들의 위치를 정해줄 수 있도록 도와주는 속성입니다. 일반적으로 position:relative; 와같이

포지션에서 어느 속성을 부여할것인지 정해서 사용합니다.  그리고 이를 이용해서 컨텐츠들의 위치를 깔끔하게 적용시켜 줄 수 있습니다.

 

 

 

 

2. relative를 알아보자

 

postion:relative를 적용하게 되면, top:40% , left:60% 등 위에서 몇퍼센트 떨어지게 할것인지, 왼쪽에서 몇퍼센트를 떨어지게 할것인지

정할 수 있는 속성 값을 사용할 수 있게 됩니다. (좌표처럼 사용할 수 있다)

단, 적용한 순간 이 top,left를 사용하게 되면, 좌표의 기준은 바로 속성을 부여한 태그안에서 가장 좌측 최상단이

기준이 됩니다.

 

 

아래는 제가 만든 <div>입니다. 파란네모를 감싸고있는 사각형의 틀에 relative 값을 부여했습니다.

그래서 까만색으로 동그라미를 친 부분이 (사각형 맨 왼쪽 맨위 끝부분)바로 기준 좌표점이 됩니다.

 

만약에 파란네모에 부여를 했다면? 기준점은 파란네모의 맨 왼쪽 윗부분이 기준점이 됩니다.

그 기준점을 기준으로 만들어놓은 태그를 움직일 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. absolute를 알아보자.

absolute는 조금 다른 유동적인 성격을 가지고 있습니다.

일반적으로 absolute를 부여하게 되면, 기준점은 릴레티브와 다르게 그냥 화면의 맨왼쪽 맨 윗부분 입니다. (마찬가지로 top, left등을 사용할 수 있게 됩니다.)

아래의 사진을 보시면, 검은색으로 동그라미를 친 부분이 바로 기준점이 됩니다.

그리고 그 기준점에 따라서 움직이게 됩니다.

 

근데!

 

유동적인 부분이 하나 있습니다.

만약 absolute를 부여한 태그의 부모나 부모의 부모이면, 즉 자신을 감싸는 상위의 태그에 속성이 relative로 부여가 되어있다면,

absolute의 기준점은 화면 최상단 좌측이 아니라, 그 상위의 태그내부에서 최상단의 좌측이 기준점이 됩니다.

아래의 사진을 보면 됩니다.

 

 

 

 

div big에 rel이 부여 되어있습니다. 만약 이게 없다면

nemo (검은 네모는) 보라색 동그라미 친부분(웹페이지의 중앙)에 와야 합니다. 왜냐하면 제가 딱 중앙으로 오게 만들었거든요.

근데 페이지의 중앙으로 오지않고 big의 중앙으로 갔습니다. 

말했듯이 부모가 relative를 받아서 기준이 그 부모의 최상단 좌측으로 바뀌었기 때문입니다.

 

 참조: https://rsche.tistory.com/105