똑같은 삽질은 2번 하지 말자
position :absolute의 top left right bottom 에 의해 위치가 정해지는 원리 본문
position: absolute 속성을 가진 자식은 부모의 position: relative or <html> 을 기준으로 위치가 정해지는데
top right bottom left는 부모(position: relative or <html> )의 어디 지점을 기준으로 삼을 것인지 지정 할 수 있다.
top: 양수px - 상단기준. 아래로 이동
top: 음수px - 상단기준. 위로 이동
bottom: 양수px - 하단기준. 위로 이동
bottom: 음수px - 하단기준. 아래로 이동
left: 양수px - 좌측기준. 오른쪽으로 이동
left: 음수px - 좌측기준. 왼쪽으로 이동
right: 양수px - 우측기준. 왼쪽으로 이동
right: 음수px - 우측기준. 오른쪽으로 이동
뭔가 margin 개념으로다가 이해하면 좀더 쉽게 이해할 수 있다.
해당 기준방향 지점에서 내 위치가 멀어지는것 이라고.. 매번 헷갈리는데 참고하자
'CSS' 카테고리의 다른 글
| BEM 명명규칙(CSS class) (0) | 2021.11.06 |
|---|---|
| flexbox에서 가변요소의 자식width가 부모width를 넘을때 (4) | 2021.09.22 |
| flex: 1 1 0 의 의미 (2) | 2021.08.07 |
| flexbox 를 이용한 하나의 그룹에서 주변의 요소를 크기를 고려한 스크롤이 만들어지게 하는방법 (0) | 2021.07.17 |
| 플러그인의 태그내용을 나의 CSS에서 바꾸기(가상요소) (0) | 2020.09.12 |
'CSS' Related Articles
more
Comments