[CSS] CSS Layout 의 기본 (4.position - relative vs static)
![[CSS] CSS Layout 의 기본 (4.position - relative vs static)](/assets/img/blog/css/css.png)
CSS layout, box-model, margin collapse, position, box-sizing
4.Css의 position - relative
1)개요
CSS의 position 속성은 문서상에 요소를 배치하는 방법을 지정합니다. 포지션을 지정하는 offset 속성 값에는 다음과 같은 것들이 있습니다.
top, right, bottom, left
그렇다면 position 속성은 무엇무엇이 있을 까요? 그속성은 다음과 같습니다.
static, relative, absolute, fixed, sticky
위의 속성중 이번포스팅에서 다룰 속성은 static 과 relative 입니다.
2) position 속성 static
요소를 일반적인 문서 흐름에 따라 배치하는 속성입니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않으며 position 속성의 기본값 입니다. 그렇다면 소스로 한번 알아 볼까요?
<!DOCTYPE html>
<html>
<head>
<style>
div{
border:5px solid tomato;
margin:10px;
whidt:80%;
}
#me{
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
위의 코드를 보았을때 me box 가 left와 top이 100px 만큼 이동해 있을 것이라 생각하지만 아래의 그림과 같이 전혀 움직이지 않은것을 볼수 있습니다.
왜 그런 것일 까요? 그것은 position 의 기본값이 static 이기 때문입니다. 그렇다면 me box 를 움직이기 위해서는 어떻게 해야할까요. offset 속성을 이용할수 있는 relative 속성에 대해 알아 봅시다.
3) position 속성 relative
relative속성은 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
여기서 중요 한 점은 다음과 같습니다.
자기 자신을 기준으로
이기적인녀석이군요..오프셋을 적용
그럼 소스로 알아볼까요?
<!DOCTYPE html>
<html>
<head>
<style>
div{
border:5px solid tomato;
margin:10px;
whidt:80%;
}
#me{
/*이부분 추가해주세요*/
position : relative;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
position 값만 relative 로 변경해주었는데 큰 변화가 있습니다. 위의 소스가 아래의 그림처럼 left,top 속성이 반영된 것을 알 수 있습니다.
4) 정리
위의 예제와 설명으로 static과 relative 를 알아 보았습니다. 정리를 하자면 static은 정적인 속성으로 offset 속성들을 이용하지 않는 것이 특징이였고 relative 는 자기 자신 기준으로 offset을 적용하는 속성인 것을 알 수 있습니다. 아래의 그림과 같이 말이죠
이제 position 에 첫발을 내 딛었습니다. 어렵다고요? ... 저도 CSS에서 제일 어려운 부분이 layout 부분을 잡는 부분이 제일 어렵습니다. 하나하나 찬찬히 채워가다보면 layout을 정복하는 그날이 올 것입니다.
