CSS - 5 [layer, position : fixed, static, absolute]

position: fixed

- 페이지가 매우 길어 스크롤링을 해야하는데도 같은 위치에 계속 머물러 있는것.(adsense 같은 광고, 메뉴)

- position이라는 attribute에서 사용가능

 

- 스크롤이 내려가고 있는데도 위치를 고수하는 박스 

 

Layer

- top, bottom, left, right attribute 중 하나라도 수정한다면 다른 레이어에 있게됨.

- 아래 경우는 위에 있는 div가 있으므로 top혹은 bottom을 수정하면 다른 레이어에 있게됨.

- 두 박스는 같은 레이어에 있는것이 아니다. 서로 다른 레이어에 있다.

 

- inline이므로 좌우가 신경쓰이게 되니 left에 값을 설정해주면 레이어가 다르게 설정된다.

 

position: static

- position의 default

- 레이아웃이 박스를 처음 위치하는 곳에 두는 것 (가장 첫 번째 자리에 박스를 놓는것)

- 가장 처음에 박스를 위치하는 것

 

position: relative

 

- 두개의 블럭이 겹쳐 있을 때(부모 박스로 부터 자식 박스를) 하나의 블럭을 조금씩 움직이고 싶을 때 사용한다.

- position: relative 을 사용하면 top, right, left, bottom이란 attribute가 사용가능하며 값을 주며 이동한다.

- 해당 블럭이 처음위치한 곳을 기준으로 수정한다.

- class, id등 사용이 가능하다.

 

postition: absolute

 

- 가장 가까운 부모관계에서 relative 한 것으로 부터 element의 위치를 특정지을 때 사용한다.

- id = among div의 가장 가까운 relative한 부모는 div가 아니다, body이다. 따라서 body 기준으로 움직인다.

- body는 가장 바깥의 relative한 부모가 될 수 있다. 만약 부모 div가 position: relative 이면 부모 div기준으로 움직인다.