[css] Position : relative, absolute, fixed

bluepony·2022년 1월 25일
0

TIL

목록 보기
2/25

css

  • 정의 : 사용자에게 문서를 표시하는 방법을 지정하는 언어(스타일, 레이아웃 등)
  • 규칙에 따라 작성되며, 특정 그룹의 식별자와 스타일을 구별하여 적음
  • 아래는 h1태그에 빨간색을 적용하는 예
h1 {
	color: red;
}

position

  • css 속성 중, '위치'에 관한 속성
  • 적용 될 수 있는 값에는 static, relative, absolute, fixed, sticky 등이 있다.
  • static과 sticky에 관하여는 간략하게 언급하고 넘어가도록 하겠다.
    • static : position속성의 기본 값, 값이 static으로 지정되면 top, left 등 위치 이동 값이 적용되지 않는다.
    • sticky : 스크롤 박스를 기준으로 위치가 설정되고, 특정 기준점에 이르면 위치가 고정된다.

position: relative

  • 기준 : 해당 요소의 보통 상태일 때의 위치
  • 기준으로부터 top, left, rigth, bottom(좌표)의 속성에 값에 따라 이동 (다른 값들도 마찬가지)

position: absolute

  • 기준 :
    1. 부모 요소 중 position 값이 'relative', 'absolute', 'fixed'로 설정된 요소가 있는 경우 -> 그 요소의 위치가 기준이 됨
    2. 부모 요소 중 position 값이 'relative', 'absolute', 'fixed'로 설정된 요소가 없는 경우 -> viewport가 기준이 됨
  • 박스요소를 absolute로 설정할 경우 width가 내용의 크기 만큼으로 설정됨(div같은 block요소)

position: fixed

  • 기준 : viewport
  • 페이지의 특정 위치에 항상 고정되어 있어야 할 때, 사용함
  • 박스요소를 absolute로 설정할 경우와 마찬가지로 width가 내용의 크기 만큼으로 설정됨

배운점 :

  • position은 위치 설정의 기준이 중요
  • flex는 display속성의 값이고 position과는 상관 없음
  • html,css를 작성할 때, 구현하고자하는 페이지의 모습을 확실히 정하고, 순서대로 하지 않으면 복잡해짐
  • 과제 전반에 대하여는, 처음에 전체 과제를 훑어보고, 1일 할당량을 정하여 수행해야 완료할 수 있다.

참고
내가 몰랐던 HTML/CSS part 5. position:fixed 와 :sticky의 차이
CSS 포지션(position)
[css] 요소의 위치(position) 정리

profile
모든 일이 쉽기 전에는 어렵다.

0개의 댓글