반응형
0. static
css position의 default 값은 static이다
static의 속성은 element를 위에서부터 아래로 배열시켜준다
아래의 속성들과 달리 top, bottom, right, left 속성의 값을 무시한다
1. relative
top, bottom, right, left을 이용해 원래의 위치(static)에서 상대적인 position을 갖게 해준다
원래의 위치(static)에 빈 공간을 만들어 다른 content가 위치할 수 없게 한다
2. absolute
가장 가까운 조상 positioned를 기준으로 상대적인 위치를 설정하고, 가장 가까운 조상 positioned가 없다면 body를 기준으로 위치가 설정된다
3. fixed
화면에서 상대적 위치를 결정한다
스크롤에 관계없이 항상 같은 자리에 고정되도록 한다
원래의 위치(static)에 빈 공간을 만들지 않아 다른 content가 위치할 수 있다
Resources
반응형
'Learning Log > HTML&CSS' 카테고리의 다른 글
| [css] 배경화면 투명하게 하기 (0) | 2023.02.12 |
|---|---|
| [html] input과 button tag의 차이점 (0) | 2023.01.06 |
| [html/css] 목록을 만드는 dl, dt, dd tag (0) | 2023.01.06 |
| [css] Layout - inline, inline-block, block이란 (0) | 2022.12.16 |
| [html/css] Semantic Web과 Semantic Tags의 차이 (0) | 2022.12.08 |