안녕하세요 르쉐입니다.
오늘은 html의 css에서 postition속성 그중에서 relative와
absolute가 어떤 역할을 하는지 핵심을 알아보고
이 두 속성의 상관관계가 어떠한 점이 있는지
알아보도록 하겠습니다.
fixed,static은 다음에 알아보기로 하겠습니다.
여기서는 릴레티브,앱솔루트만
간단 명료하게 어떠한 점들이 있는지 스크린샷과 함께
설명을 써보았습니다.
그럼 보도록 하겠습니다.
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를 받아서 기준이 그 부모의 최상단 좌측으로 바뀌었기 때문입니다.
여기까지 르쉐였습니다.
댓글