[css] 위치속성 정리 - position, z-index, overflow, float

position 속성

 

1. static : HTML태그가 작성된 순서대로 위치한다(디폴트)

top, bottom, left, right 값은 적용X

 

 

2. relative : 현재위치에서 top, bottom, left, right 속성값만큼 이동한 위치에 배치

top/bottom 동시지정 시 bottom 무시

left/right 동시지정 시 right 무시

 

 

3. absolute : top, bottom, left, right 속성값으로 정한 절대위치에 배치

- position : absolute를 추가하고, top/left 등은 입력하지 않을 경우 순서대로 배치된다.

 

 

- top: 0, left: 0을 넣어주면 브라우저 왼쪽 상단 모서리에 위치한다.

 

 

- top: 100, left:100 의 경우 모서리에서 각각 100씩 띄어진 위치에 배치된다.

 

 

 

- 부모요소를 기준으로 자식요소를 position: position을 설정하고 싶다면

부모요소에 position: relative를 넣어주면 된다.

- absolute는 inline속성을 가진다.

- 태그가 <p>태그인 경우 적용되지 않고 <div>태그는 가능하다.

 

 

 

4. fixed : 스크롤 또는 브라우저 크기 변경 시에도 화면에 고정되어 있다.

- fixed 설정 후 left, top 등 따로 속성을 지정하지 않으면 뜬 공간이 생긴다.

position fixed 설정 후 bottom만 지정했을 경우

이렇게 왼쪽에 공간이 뜨게 되는데, 이 공간을 없애기 위해서는 left: 0;을 따로 지정해야 한다.

^

position: fixed

bottom: 0

left: 0 을 적용한 경우

 

 

 

 

 

z-index 속성

: 속성값을 크게 지정하면 제일 위로 쌓인다.

* 부모-자식요소에서 부모요소를 크게 주더라도 자식의 위에 있지 못하다

형제관계에서만 가능

 

<결과>

 

 

 

overflow 속성

: 내부 요소가 부모의 범위를 벗어났을때 어떻게 보여줄지 설정

- 블록태그에만 적용된다

 

 

 

float 속성

: 태그를 오른쪽이나 왼쪽에 항상 배치할 수 있다. (left  or right)

float은 inline 속성을 가진다.