[HTML , CSS] position 속성 이해하기

▶ 오늘은 position 속성에 대해서 알아보겠습니다.

 

먼저 position을 이해하기 위해서 position의 4가지 속성에는

 

◎ position 속성 4가지

1. static
2. relative
3. absolute
4. fitxed

이렇게 4가지가 존재하는데요.

 

 

position을 쓰는 이유는 대표적으로 임의로 offset 값을 주기 위함입니다.

* offset : 페이지 전체를 기준으로 위치값을 반환한다. = 즉 ,절대좌표

 

어떤 범위가 지정된 것의 위치를 바꾸게 되면 자동적으로 같이묶여있는다른 개체들 한테도 영향을 미치게 됩니다.

그렇기때문에 어디에도 영향을 받지않는 독립적인 개체로 만들어 주고 위치값을 자유롭게 주어 배치하면 편리하므로

position 속성은 아주 유용하고 자주 쓰이게 됩니다.

 

● 하지만 4가지 속성도 사용하는 상황이 다르기때문에 적재적소에 쓰는 것이 중요합니다.

1. static : 브라우저기준으로 좌 상단 좌표가 0 , 0 ( 기존자동으로 static이 됩니다)
2. relative : 부모기준으로 좌 상단 좌표가 0, 0에서 상하좌우로 이동 가능 , 현재 위치에서 유령화됨
3. absolute : 처음 위치는 static을 따라감(위치 지정 시에 브라우저 기준으로 좌 상단 좌표가 0, 0 )
4. fitxed : 무조건 브라우저를 기준으로한 좌표를 따른다 ( but fixed는 화면에 고정되어 스크롤 무시하고 따라다님)

* position 4가지 속성 공통점

: 유령화 시킴( 부모에서 탈출 자유롭게 이동 가능)

: 자유롭게 임의로 위치 조정가능

 

---

 

 

아래에 이해를 더 돕기 위해 코드펜을 참고하겠습니다.

 

* 4개의 박스가 inline-block 된 상태

 

 

 

 

 

1. relative

 

* 4개의 박스가 inline-block 된 상태에서 position : relative 만 추가

 

-달라진점은 없어보입니다. 여기에 위치값을 줘보겠습니다.

- top:200px; / left:20%;를 입력하였더니 개체 하나하나가 기존 위치를 0 , 0 으로 각각 기준삼아

  아래로 200px , 오른쪽으로 20% 이동한 것을 볼 수 있습니다.

 

 

2. absolute

* 4개의 박스가 inline-block 된 상태에서 position : absolute 만 추가

 

- absolute를 추가하였더니 크기가같은 박스 4개가 하나로 겹쳐진 것을 알 수 있습니다.

- absolute는 개체 하나하나가 유령화가 되면서 같은 위치가 되어 서로 겹쳐진 것을 알 수 있습니다. (relative와 다른점)

- 여기에 위치값을 줘보겠습니다.

- top:200px; / left:20%;를 입력하였더니 4개의 박스가 서로 겹쳐진 상태로

  아래로 200px , 오른쪽으로 20% 이동한 것을 볼 수 있습니다.

 

 

3. fixed

* 4개의 박스가 inline-block 된 상태에서 position : fixed 만 추가

 

- fixed를 추가하였더니 크기가같은 박스 4개가 하나로 겹쳐진 것을 알 수 있습니다.

- fixed는 absolute와 같은속성인 것처럼 보이나 fixed는 보이는화면에 박제 한 것처럼 고정되어

  스크롤을 무시하고 오로지 자기의자리를 지키려고 하기때문에 스크롤를 해도따라 다니게 됩니다.

 

- fixed는 박제되어 상단에 nav를 추가하여 높이를 500px주어 스크롤시에도 따라다니는 것을 구분할 수 있게 하였습니다.

 

 

▼ 아래는 스크롤된 화면

 

 

여기까지 position 4가지 속성에 대한 위치설정의 차이점에 대해서 알아보았습니다.