box-shadow, zIndex, negative margin, absolute와 flex 관계성에 대해 확인해본 결과 정리

1. HTML 요소에 box shadow를 적용하고 그것을 container로 감쌌을 때 크기 변화가 있는지와 잘리는지 확인하기
   1. 정리:
      1. box-shadow는 자식에 적용되도 부모에서 잘리지 않는다.(ScrollContainer 같은 경우는 특수 케이스)
      2. 부모에 height을 지정해도 안잘린다.
      3. 부모가 여러 겹이어도 안잘린다.
2. 자식이 absolute인데 flex-container 부모가 위치 조정 가능한지 테스트 (ex: 자식 스스로 align-self 가능한지 테스트) ⇒ 가능, 형제들과의 관계에서 위치 계산 안됨, 부모 크기 내에서 flex 명령어 적용됨
   1. 정리:
      1. 부모가 flex-container이고 자식이 absolute라도 flex 명령어가 동작한다! 형제들 크기 무시..!,(but alignSelf는 동작 안함)
      2. align-items: stretch는 부모의 높이만큼 늘어나는 것… 형제 요소의 크기 만큼 느는 것이 아님(부가 발견)
3. absolute에서 bottom: 100%과 top: 0의 차이 알아보기
   1. 정리: bottom: 100%에서 %의 단위는 absolute의 타겟 element의 높이입니다. 100%인 경우, 부모 높이만큼을 부모의 bottom으로부터 올리겠다가 되는 것이죠.
4. marginBottom과 zIndex 간의 관계 알아보기(부모 요소 안에서 부모가 marginBottom -20하는거랑 자식 요소가 marginBottom -20 하는 것의 차이라던가..)
   1. 정리:
      1. 기본적으로 zIndex 우선순위는 코드 상으로 아래에 있을 수록 높다. 그리고 이 zIndex 상의 우선순위는 부모를 따른다. 즉, 부모의 zIndex를 자식도 똑같이 물려받는다.
      2. 그러나 flex-item이거나 position: relative이면 코드 상의 위치 상관없이 zIndex 우선 순위 조정이 가능해진다.
      3. negative margin으로 요소를 컨트롤해서 위치 조정을 한다해도 위의 zIndex 계산법이 적용된다.
      4. 부모 요소에 negative margin(예: marginBottom: -100px)을 걸게되면 아래 요소가 부모 요소를 100px만큼 덮게 된다. 이때 marginBottom을 적용한 부모 요소에 존재하던 내부 자식도 같이 덮이게 된다. 그런데 만약 이 자식 요소가 zIndex 우선 순위가 높은 상황이라면? 그럴 땐 아래 요소로 인해 덮이지 않는다. 이렇게 될 경우 부모만 크기가 100px 줄어들고 자식은 원래 위치에 존재하기 때문에 튀어나와 보인다. 그리고 이때는 부모 요소에 overflow: hidden을 걸어도 자식이 숨겨지지 않는다.
      5. flex-item인 경우에만 marginBottom: -100px가 적용됨(이유는 모름) 아무튼 이렇게해서 적용이 되었을 때 아래 요소 위에 위치하게 됨(flex-item이기 때문에 아래 요소보다 zIndex 우선순위가 높음) 그리고 부모 요소는 아래 요소와 위치 계산이 그대로 되고 있음(자식에 marginBottom: -100px을 걸기 전과 똑같이 화면에 보이는 중), 자식 본인만 위치 이동된 것'처럼' 보이는 것일 뿐 그리고 이 경우 overflow: hidden도 적용이된다.
5. (상기하려고 적는 상식) height: 100%은 부모 요소의 높이 100%를 의미(paddingBottom: '100%'와 헷갈리지 말기)