2020. 7. 19. 19:39ㆍFront-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 |