5. position

• 요소의 위치를 원하는 곳으로 이동시킬 때 사용

기본 값 : static

속성

position: static;
/*기본값, 정상흐름 대로 배열, 좌표설정 안됨*/

position: absolute;
/*절대위치, 정상흐름 대로 배열, Normal-flow의 흐름에서 벗어남 */
/*부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 됨.
부모의 position 값이 static 인 경우 조상의 position 값이 static이
    아닐 때까지 거슬러 올라가 기준으로 삼음*/

position: fixed;
/*고정위치, 뷰포트 상에서 offset이동, 부모위치에 영향 안받음*/

position: relative;
/*상대위치, 부모위치에 영향 안받음, Normal -flow의 흐름을 따름*/

Normal-flow란?

• 일반적인 상황에서 각의 요소들의 성질에 따라 배치 되는 순서(흐름)
• 예를 들면, block 레벨 요소들은 상하로 배치되고, inline 레벨 요소들은 좌우로 배치되는 것

offset

top: 50%;
left: 10px;
bottom: -10px;
right: auto;

6. z-index

• 덮어쓰기 순서 정하기
• 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성

기본 값 : auto

속성

• position 값이 static이 아닌 경우 지정가능
• 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
• 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
• 큰 값이 가장 위쪽(음수 사용 가능
  이럴때 쓰는 거

복잡한 예제

7. HTML/CSS 유효성 검사

• 유효성 검사를 통해 마크업 문법상 에러가 없는지 표준에 맞게 작성되었는지 알 수 있고,
• 사용성과 접근성, SEO 최적화 개선에도 도움이 된다.

유효성 검사하는 사이트