html position 쉽게정리! relative,fixed,absolute

CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정하는 것입니다.

 

    목차

1. relative
2. fitxed
3. absolute

 

 

   position 요소는 

• static
• relative
• fixed
• absolute

이렇게 4가지 요소가 있습니다

먼저 static은

position : static 값은 원래 있어야 할 자리에 있다고 생각을 하면 쉬운데요.

html에 모든 요소에 position은 static 을 기본값으로 받습니다.

그럼 static 말고는 어떤 요소가 있을까요?

 

먼저 첫번째로 알아볼 position 요소는 relative 입니다.

position : relative 는 자기자신을 기준으로 원래위치에서 얼만큼에 간격을 준다고 생각하시면 쉬운데요.

 

예를 들어

 

position: relative;

top : 30px;

left : 30px;

이렇게 입력을 하시면 위로 30px만큼에 간격, 왼쪽으로는 30px 만큼에 간격을 준다는 뜻입니다.

근데 여기서 의문이 드실건데요 

html에는 똑같이 사방으로 간격을 주는 또 다른 태그

바로 margin 이라는 것이 존재합니다.

근데 위에 두 태그는 기준이 다른데요 밑에 예제를 보면서 설명하겠습니다.

감이 오시나요?

 

위에 예제와 같이

position : relative; 로 간격을 준 relative 포지션 요소만 왼쪽으로 80px에 간격만큼 이동합니다.

반면 margin으로 80px 간격을 준 오른쪽 예제는 다른요소들도 그에 맞춰지는 것을 볼 수 있습니다.

 

다음으로 fixed postion에 대해 알아보겠습니다.

fixed position은 브라우저를 기준으로 포지셔닝 하는 것 인데요.

바로 예제부터 보여드릴게요.

 

fixed position에 대한 예제입니다.

 

이 예제에서 잘 보셔야 할 부분이 있는데요

눈치 채셨나요?

스크롤에 위치는 다른데   I just   이부분에 위치는 고정되어 있죠?

fixed 포지션은 브라우저를 기준으로 하는 포지션입니다.

예제에

position : fixed;

top: 50px; < - - 브라우저를 기준으로 위에서 50px 에 간격을 주고

left : 20px; < - - 브라우저를 기준으로 왼쪽에서 20px 에 간격을 준 곳에 위치 시킨다는 뜻입니다.

그래서 스크롤을 내려도 브라우저를 기준으로 위치해 있기 때문에   I just  에 위치는 고정이 되어있는걸 볼 수 있습니다.

 

마지막으로 absolute position에 대해 알아봅시다.

absolute position은 가장 가까이 포지셔닝 된 조상 요소를 기준으로 포지셔닝 하는데요

감이 잘 안오실탠데요 바로 예제를 통해 쉽게 설명해드리겠습니다.

absolute position 예제-1입니다.

 

위 예제를 보시면

d3 {

position : absolute;

top: 70px    }

이렇게 d3(파란색 박스)에 포지션을 absolute 로 주고

위로 70px에 간격을 줬는데 예제 그림을 보시면 왼쪽으로는 간격을 주지 않았는데 왼쪽에도 간격이 들어가 있죠?

바로 위에서 설명한 것처럼 가장 가까운 조상요소인 d2(초록색 박스)가 포지셔닝되었기 때문에 

d2를 기준으로 위로 70px을 줬기때문에 왼쪽에도 간격이 생깁니다.

이해가 되시나요? 

그럼 d2에 포지셔닝을 하지않으면 파란색 박스는 어떻게 움직일까요? 예제 바로보여드릴게요.

 

absolute position 예제-2입니다.

위 예제를 보시면 예제-1과 다른점이 무엇인가요?

파란박스가 왼쪽에는 간격이 없어졌죠?

d2에 포지션이 없으니까 다음으로 가까운 조상요소 d1이 포지셔닝 되었기 때문에 d1을 기준으로

d3는 top: 70px 만큼에 간격을 갖게 되는것 입니다.

이제 가장 가까운 조상요소를 기준으로 한다는 말에 뜻이 이해가 되시지요?

 

 

포지션에 4가지 요소(static, relative, fixed, absolute) 에 대해 알아보았습니다.