(섹션) > (이미지 opacity) (3)
(섹션) > (배경색 opacity) (2)
(섹션) > (그리드) > (컨텐츠) (1)
(그리드) (배경색) (이미지) -> 형제
* 겹칠 수 없다.
* position을 활용해야 한다.
* relative는 일반적인 태그로 사용이 가능한 동시에 z-index로 absolute 형제들과 순서를 바꿔서 배치 가능하다.
* absolute, relative끼리는 동생엘리먼트 일수록 위에 나온다.
[가상요소] -> 적용한 태그에 자식으로 생성된다.
wrap-section::after{} -> wrap-section의 막내동생
html에 작성된 태그들(둘째부터 막내전까지)
wrap-section::before{} -> wrap-section의 첫째