Position

Table of contents

1. Position Property
   1. What is position?
2. Position values
   1. Static value
   2. Relative value
   3. Absolute value
   4. Fixed value
   5. Sticky value
3. Z-index Property
   1. What is z-index?

Position Property

What is position?

요소에 사용되는 위치 지정 방법 유형

position 속성이 먼저 정해진 뒤 사용할 수 있고, top, bottom, left, right 속성따라서 기준점의 위치를 4군데로 지정하며, 또한 position 속성에 따라서 다르게 작용함

Position values

Static value

웹 페이지가 작성된 순서대로 출력 위치를 정함(normal flow) - default

adjustment properties(top, left, bottom, right) don’t work on this

Relative value

기본 위치에서 adjustment properties에 의해 상대 배치

▸ 반응메뉴

▸ positioned relative to its normal position.

Absolute value

부모 태그 안에서 절대좌표

▸ adjustment properties로 정함

▸ 자식이 absolute 일경우 부모는 relative, absolute, fixed사용해야 자식이 들뜨지 않음

Fixed value

절대좌표

▸ positioned relative to the viewport, 즉 스크롤 되어도 항상 같은 자리에 위치함

▸ adjustment properties(top, left, bottom, right) work on this

▸ 딱 붙히고 싶은경우 top이나 bottom값 = 0 을 정해줘야 들뜨지 않음

Sticky value

based on the user’s scroll position

★ top 속성값 필수로 필요함

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;                        //필수로 들어가야함
}

간단 정리

Z-index Property

What is z-index?

Overlapping Elements

▸ 기본값은 0, 정수로 요소들의 위치를 바꿈