[CSS] position 속성

2020. 7. 19. 19:39Front-End/CSS

 - position 속성

  - 웹 페이지 상에 어떤 위치에 배치할지 설정하는 요소

 

- position 속성 값

  - static : position의 초기값으로 자동으로 배치

                top, right, bottom, left가 설정이 되지 않으며

                즉, position에서 생략이 가능

  - relative : 부모 요소에 의해서 이동 되는 속성 값

                    이 속성 부터 top, right, bottom, left를 사용을 할 수 있음

  - absolute : 부모 요소에 대한 지장을 받지 않으며 자신의 단독으로 위치를 설정이 가능

  - fixed : 어떠한 요소에도 지장을 받지 않으며 사용자가 설정한 위치에 따라서 고정으로 배치

  - sticky : 사용자 스크롤 위치에 따라서 설정이 됨

                 해당 위치 부터 top: 0이 되면 fiexd 설정처럼 사용

 

 - position : static -> 현재 CSS에서 static 클래스 부분에 top, left 값이 주어져도 위치는 변형이 되지 않음

 - position : relative -> relative는 static 요소 기준으로 top, left 값으로 위치가 배치

 - position : absolute -> absolute는 단독으로 자신의 top, left 값으로 이동이 배치

 - position : fixed -> fixed는 현재 위치한 페이지에서 위치가 변경이 되지 않음

'Front-End > CSS' 카테고리의 다른 글

[CSS] float 요소와 clear 요소  (0) 2020.07.19
[CSS] overflow 속성  (0) 2020.07.19
[CSS] display 속성  (0) 2020.07.15
[CSS] margin과 padding  (0) 2020.07.14
[CSS] CSS 정의  (0) 2020.07.11