부모요소, 자식요소 상속 관련 질문있습니다.

Question

아래의 코드 중에서

에 position:absolute; 를 명령하면 저 태그의 자손,자식요소에다 그 명령이 상속되나요? 저는 상속될줄알고 absolute 를 이미지의 부모 요소에 적용하는거라고 생각했었거든요. 공부하다보면, 부모요소에 명령한것이 자손,자식에게 까지 상속되고, 어떨때는 어떨대는 안되는거같아서 헷갈려요

코딩웍스(Coding Works) · Answer

먼저 결론부터 말씀드리면 부모요소의 속성이 자식요소의 속성에 상속되는건 몇가지 없습니다. 예를들어 font-size, color, background-color 등 입니다. 이외 대부분은 부모요소의 속성이 자식요소의 속성에 상속되지 않습니다. 지금 말씀하신 포지션 속성도 그렇습니다. 부모요소에 position: absolute를 주었다고 자식요소가 position: absolute가 되는건 아닙니다. 자식요소는 여전히 포지션 속성의 기본 속성인 position: static 입니다. 자동상속은 아니고 inherit라는 값을 사용해주면 상속을 받습니다. 예를들어 부모요소의 너비와 높이가 width: 300px, height: 500px일 때 자식요소에 width: inherit, height: inherit라고 하면 부모요소의 너비값과 높이값을 상속 받습니다. 물론 inherit를 사용하지 않으면 자식요소의 고유의 너비와 높이가 유지됩니다.