CSS POSITION

위치를 결정하는 결정하는 속성입니다.

static (기본위치)

기본적인 position 속성입니다, 따로 속성을 주지 않는다면 적용됩니다.
오른쪽에서 왼쪽, 위에서 아래로 배치

부모 안에서 위치될 때에는 부모를 기준으로 오른쪽에서 왼쪽, 위에서 아래로 배치

relative (상대위치)

태그의 top, left, right, bottom을 이용하여 위치 조절이 가능
태그의 안쪽 방향으로 준 스타일이 적용됨.
relative의 경우 자신의 static 기준으로 움직임.

{
  position: relative;
  top: 5px
}

top을 5px를 줄 경우, 위에서 아래로 5px 내려감.

absolute

absolute의 경우 static 속성을 가지고 있지 않은 부모 포지션을 기준으로 움직임, 만약 부모 태그에 relative, absolute, fixed 가 없다면, body를 기준으로 움직임.

fixed

특정 위치에 고정시키는 것.

fixed를 하여, top, bottom, left, right를 0으로 줄 경우 전체 창 처리.

{
  position: fixed;
  top: 0;
  bottom:0;
  left:0;
  right:0;
  scroller
}

참고

z-index: 기본은 0, 높을수록 위로 표현됨. static 외에서만 가능

block tags

div, p, article, aside, blockquote, canvas, dd, dl, dt, fieldset, figcation, figue, footer, form, h1~h6, header, hr, li, main, nav, noscript, ol, p, pre, section, table, tfoot, ul, video

inline tasg

span, label, a, abbr, acronym, b, bdo, input, select, strong

Ref

• [tags] https://www.w3schools.com/html/html_blocks.asp
• https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea1
• https://poiemaweb.com/css3-position