[IT] HTML - position 속성이란 ?

ㅇ position 이란 ?

ㅡ Normal Flow를 따라서 위치가 배치된다. ( cascaing 의 흐름 )

ㅡ top , bottom , left, right 의 값에 따라 최종 위치가 배치된다 .

ㅡ  배너의 위치, 아이콘의 위치 등을 지정할 때 사용한다.

 

ㅇ position 의 종류

ㅡ static  (기본값) 

ㅡ absolute

1) 요소를 Normal Flow에서 제거 하고, 

2) 가장 가까운 부모 기준으로 동작이 흐른다 .

3) 그런요소가 없으면 최상위 부모 < body > 를 기준으로 한다 .

4) float 처럼 둥둥 뜨게 된다 .

5) 주로 기준점으로 잡고 싶은 부모를 기준을 relative를 설정하고, 자식요소에 absolute로 자주 쓴다 .

 

ㅡ relative 

1) Normal Flow에 따라 배치한  원래 자기자신의 기준으로 동작이 흐른다 . 

2) top , right , left, bottom 의 지정한 위치에 배치된다 .

3) 양수값, 음수값 가능

4) 서로 반대되는 값을 주게 되면  하나만 적용된다 (top-bottom 은 top / left-right 는 left  만 적용된다) 

ㅡ fixed

1) Normal Flow의 흐름을 제거하고 

2) 보이는 화면 뷰포트를 기준으로 위치를 배치한다.

3) 스크롤을 쭉 해도 계속 따라온다.

ㅡ sticky

1) Normal Flow 를 따르고 

2) 가장 가까운 스크롤이 되는 부모 기준으로 배치된다 .

3) 기본적으로 스크롤이 되는 상황에서만 배치된다 .

4) 스티커처럼 스크롤을 내리다가 특정 시점에서 마치 fixed 처럼 동작한다 .

---

ㅇ z-index ( z축을 변경) 팝업창, 경고창 등등 ..

ㅡ z-index:auto;  기본값 , 코드를 작성한 순서대로 배치된다 .

ㅡ position이 지정된 요소에만 적용 가능하다

ㅡ position속성을 지정하면  static보다 무조건 앞으로 배치된다. 

ㅡ 여러개 겹치게 되면 z-index로 앞으로 보이게 해준다 .

ㅡ 수가 클 수록 앞으로 배치 된다 .

ㅡ 정수값 가능 (양의 정수,음의정수)

position:relative;   인식이 안되면 포지션을 같이써준다.

z-index:1 ; 

---

ㅇ overflow 

ㅡ 컨텐츠가 요소 크기보다 많아서 넘쳐 흐를때, 이를 어떻게 할지 지정하는 속성 

ㅇ 종류

ㅡ overflow:visible ;

default값이다. 넘치면 깨져보임

ㅡ overflow:scroll;

넘치는 컨텐츠는 스크롤을 내리면 다보임

ㅡ overflow:hidden;

넘치는 컨텐츠는 숨김

ㅡ overflow:auto;

브라우저가 알아서 선택한다.