[html/css] css positioning

css positioning에는 static, relative, absolute, fixed가 있다.

 

다음 링크가 이해에 도움을 줄 수 있다

appbrewery.github.io/css-positioning/

 

style="position = positioning;"으로 적용

 

1. Static

html 기본값

이전 요소의 아래로 배치됨

2. Relative

기본 위치를 기준으로 배치 

3. Absolute

부모 태그를 기준으로 relative 배치

부모 태그가 존재하지 않을 시 화면 좌측상단에 배치

z-index를 최 상단으로 보이기 때문에, z index를 -로 바꾸어야 할 수 있음

4. Fixed

브라우저 창 좌측상단을 기준으로 relative 배치

브라우저를 상하로 움직여도 항상 같은 위치에 존재

 

다음 링크가 이해에 도움을 줄 수 있다

appbrewery.github.io/css-positioning/