요소 앞에 가상으로 요소를 만들어 주는 ::before를 사용하는 경우에 위치를 어떻게 조정할 수 있을까?
absolute를 사용하여 원하는 위치에 배치할 수 있다. 다만, 아래와 같은 점을 염두하고 사용하는 것이 좋다.
before의 display: absolute 사용시
-top/bottom 속성 값이 없는 경우: static 자리에 위치(before가 위치할 자리)
-top/bottom 속성 값이 있는 경우: absolute를 사용한 일반 요소처럼 relative인 부모 기준으로 정렬됨
이해하기 위해서 ::before를 사용한 후 위의 속성들을 변경해보면서 위치를 파악해보면 된다.
'웹(web) > 프론트엔드-css' 카테고리의 다른 글
modal by flex (0) | 2020.07.03 |
---|---|
CSS Flex (0) | 2020.06.22 |
CSS 정가운데 간단히 정렬하는법 (0) | 2020.05.27 |
CSS media-query (0) | 2020.05.27 |
CSS transform-origin (0) | 2020.05.27 |