국비과정/HTML&CSS

POSITION 속성 정리

낼sof 2020. 4. 23. 01:00

 > 레이이아웃을 배치하거나, 객체를 위치시킬 때 사용할 수 있는 속성입니다

 ( *단, postion의 속성은 상속이 되지 않습니다 )

 

static 

 -  position의 기본값 입니다 

 - 이동하거나 겹칠 수없는 원래 상태 입니다

 - top,bottem, left, right 속성값이 적용되지 않습니다.

relative

 

  - 겹칠수 없지만  원래 위치에서 조절 가능합니다

  - top, bottom, left, right 속성값 적용됩니다

  ( relative 각방향의 안쪽방향으로 이동합니다)

 

absolute

 

  - position : static 속성을 가지고 있진 않은 부모를 기준으로 움직인다 

   (부모중 position relative,absolute, fixed 태그가 없다면 가장의 위의 태그인 body가 기준)

  - 겹침가능

  - 최대한 줄어든다

 

fixed

  - 겹침가능

  - 최대한 줄어듬

  - 위치를 화면기준으로 지정