브라우저에 HTML UI Tag들이 그려지는 기준은 크게 고정 위치와 상태위치로 나눌 수 있다 어떤 방식으로 구성할 지는 CSS 속성의 position으로 결정된다

✔️position 속성의 값 별 동작 방식

• Static Position
  position이 정의되지 않았거나 position:static;으로 정의된 경우
  소스(코드)의 순서와 display 값에 따라 배치되며 위치 속성(left,top,right,bottom)들은 무시된다

• Relative Position
  Static Position의 확장으로 위치 속성들(left,top 등)을 사용할 수 있다

• Absolute Position
  파워포인트 또는 그림판의 도형 배치와 매우 흡사하다
  기준 점(left, right, top, bottom)을 잡고 크기(width, height)를 지정하여 배치하는 방법이다
  ex) style="position:absolute; left:20px; top:10px;width:150px;height:24px;"

• Fixed Position
  Absolute Position의 확장으로 스크롤이 되어도 해당 위치(left, top 등)에 고정되어 있습니다

• Sticky Position
  Relative Position + Fixed Position와 같은 효과로 부모 컨테이너에 고정되어 fixed position 처럼 위치된다
  CSS3 기능으로 CSS3 지원 브라우저에서만 적용된다

🔗 Static Poistion 이해하기

• Block level element
  - HTML : div, h1, p, ul 등
  - WebSquare 컴포넌트 : Group, Textbox, GridView 등
  
• Inline level element
  - HTML : span, a, img, input 등
  - WebSquare 컴포넌트 : Span, InputBox,Trigger, Anchor 등