1. position
문서 상에 요소를 배치하는 방법을 정의.
이 후에 상하좌우 설정을 한다.
static : 기본값, 일반적인 문서 흐름
1-1. relative
일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치값에 따라 오프셋을 적용
div {
position: relative;
top: 100px;
left: 100px;
}
=> 원래 위치보다 위에서부터 100px, 왼쪽에서부터 100px 떨어져 있어라!
1-2. absolute
일반적인 문서 흐름에서 제거하고, 상위 요소 중에서 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용한다.
div {
position: absolute;
top: 100px;
left: 100px;
}
=> 상위 요소를 기준으로 위로 100px, 왼쪽으로 100px 떨어진다
1-3. fixed
일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정시킨다.
div {
position: fixed;
top: 100px;
left: 100px;
}
위에서 100px 왼쪽에서 100px에 떨어진 자리에 고정된다
1-4. sticky
일반적인 문서 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋 적용
div {
position: sticky;
top: 0px;
}
=> 스크롤 이동을 할때 top에 고정되어 붙어다닌다
'Knowledge > HTML & CSS' 카테고리의 다른 글
[CSS-4] float, clear (0) | 2023.05.30 |
---|---|
[CSS-3] 박스모델 (Box-model) (0) | 2023.05.30 |
[HTML-4] 메타 태그, 뷰포트 (0) | 2023.05.30 |
[HTML-3] 입력요소 (0) | 2023.05.30 |
[HTML-2] 속성 링크 목록 (0) | 2023.05.30 |