.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
설명
HTML 문서 상에서 요소가 배치되는 방식
속성값
속성값 | 설명 |
static | HTML에 작성된 순서 그대로(static) 브라우저 화면에 표시 |
relative | 요소를 원래 위치를 기준으로 상대적(relative)으로 배치 |
absolute | 부모 요소에서 relative를 자식 요소에서 absolute를 사용하여 자식이 부모 기준으로 배치 |
fixed | 요소를 항상 고정된(fixed) 위치에 배치 |
sticky | 위치가 화면 상단에 끈적하게(sticky) 붙어서 스크롤링이 되더라도 움직이지 않음 |
static (default)
•
HTML에 작성된 순서 그대로 브라우저 화면에 표시
•
top, left, bottom, right 속성값은 position 속성이 static일 때는 무시
relative
•
요소를 원래 위치에서 벗어나게 배치 가능
•
요소를 원래 위치를 기준으로 상대적(relative)으로 배치
•
요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정 가능
absolute
•
해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾음
•
부모 요소에서 relative를 자식 요소에서 absolute를 사용하여 자식이 부모 기준으로 배치되게 함
fixed
•
요소를 항상 고정된(fixed) 위치에 배치
•
top, left, bottom, right 속성은 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지를 결정
sticky
•
화면 상단에 끈적하게(sticky) 붙어서 스크롤링이 되더라도 움직이지 않는 것
