Animation 0102

Animation 0102

transition

  & li {
      width: 100%;
      text-align: center;
      overflow: hidden;
      opacity: 0;
      position: absolute;
    }
    img{
      position: relative;
      left: 50%;
      transform: translate(-50%,0)
    }
    .active  {
      transition: opacity 0.5s ease;
      opacity: 1;
      z-index: 3000;
      position: static;
    }

왜 postion static이여야 앞으로 나오는 걸까 ?.? z-index는 상관이 없음 -> 꺼도 그대로 동작하는 걸 보면

기존에 아는 개념으로는 position relatvie/ absoulte는 layer개념이여서 붕 뜬다고 알고 있는데 고로

absoulte 자식이 위로 쌓이는 구조다 ;;; 뭐지 왜 그런지 원인 찾기

postion absolute를 끄면 다 백화되는 현상이 _= postion absoulte는 근데 해줘야 컨텐츠 크기를 맞춰줄 수 있는 것 같은데 ;;;

오늘 멘붕
transition 이 display속성은 안 먹는 것과 이 구조에서 absoulte를 꺼줘야 작용한 점 때문에 픽... 내일 다시 찬찬히 살펴보자 ;ㅁ;