반응형
html 태그나 element 등은 기본적으로 순서대로 작성됨
그런데 position을 사용하면 코드 순서와 상관없이 원하는 곳에 그려낼수 있음
position따로 지정하지 않으면 defaut로 static인데, 이 static이 뭔지를 이해해야함 -> 코드 순서대로 그려지는 상태
position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다고 함(https://ofcourse.kr/css-course/position-%EC%86%8D%EC%84%B1)
- position: relative
- relative자체는 설정만 하는 것으로 소용이 없고, top/bottom/left/right으로 조정해야 효과있음
- top/bottom/left/right 설정안해주면 static이나 마찬가지로 기존 스타일대로 위치를 차지하고 top/bottom/left/right는 0이 됨 - 상대적으로 이 위치를 0으로 보고 조정하겠다는 것
- 그래서 이름이 relative: static일때의 위치가 0이고 그걸 기준으로 조정하는 개념이므로 그냥 화면만보면 이게 top/bottom/left/right를 얼마 설정했는지 모를수 있음
- top/bottom/left/right설정하기 위해서는 position:relative로 설정해야하고, 그냥 static으로 두면 소용없음
- top/bottom, left/right는 각각 상대적으로 움직이므로, 한쪽에 10주면 나머지는 -10이 됨
- 한쪽으로 밀리는 것 막으려면 양쪽 다 지정해주면 됨
- static한 위치를 기준으로 상대적으로 움직임 -> 코드 순서대로니까 결국 내 위에 있는 애를 기준으로 한다는 의미
- position: absolute
- position이 선언된 부모로부터 절대적 (부모 position이 설정안되고 static이면 소용없음, static아닌 다른 position으로 설정해야함)
- 만약 부모가 없으면 전체 화면 <body>에 상대적으로 움직임?
- 보통은 부모 positon:relative로 설정함
- top/bottom/left/right 설정안해주면 static이나 마찬가지로 기존 스타일대로 위치를 차지차고 top/bottom/left/right는 0이 아니라 그 위치에서의 pixel값이 자동 계산되어 할당됨,
- position: relative, position: absolute 설정하고 top/bottom/left/right를 설정안했을때 겉보기에는 동일하게 위치하지만 top/bottom/left/right값은 다름, position:relative에서는 0, position: absolute에서는 차지하는 위치가 계산되어 할당됨
- 그래서 이름이 absolute: 화면상 위치로 top/bottom/left/right를 얼마 설정했는지 알수 있음
- top/bottom/left/right 모두 0으로 설정하면 전체 화면을 다 차지?
- position: fixed
- absolute와 달리 부모 필요없고음
- 특정위치에 계속 고정됨
- top/bottom/left/right 설정안해주면 static이나 마찬가지로 기존 스타일대로 위치를 차지하지만 스크롤을 올리거나 내려도 위치는 고정됨
- top/bottom/left/right 모두 0으로 설정하면 전체 화면을 다 차지?
- position: absolute와 top/bottom/left/right를 주고 움직이는 방식은 같지만 차이는 그 위치가 스크롤을 해도 고정된다는 것
반응형
'html, css' 카테고리의 다른 글
| display:block에서 정렬이 들쑥날쑥해지는 이유 - text baseline을 기준으로 정렬되기 때문 - vertial-align: text-top으로 해결가능 (0) | 2024.04.26 |
|---|---|
| css position: sideBar overlap error (0) | 2024.04.25 |
| 아래를 다 가리는 loading indicator (0) | 2024.04.25 |
| 우측정렬: text-align: right | display:flex, justify-content:flex-end | (0) | 2024.03.27 |
| 경로를 나타내는 href, src, url 차이: CSS(항상 url), HTML(link이면 href, link아닌 이미지나 비디오 등등이면 src) (0) | 2024.03.27 |