스택 컨텍스트 정보

2937 단어 HTMLCSS웹

목적


  • z-index를 사용할 때 중첩 순서가 가정과 다릅니다.
  • 겹치는 구조에 대해 정리하기

    • 스택 컨텍스트


  • 스택은 쌓이고 컨텍스트는 컨텍스트를 의미합니다
  • position을 static 이외, z-index를 지정했을 경우에 생성되는 모음의 사정
  • z-index를 사용하여 동일한 스택 컨텍스트의 요소 사이의 중첩 순서를 지정할 수 있습니다.

    실례



    CSS와 HTML은 이런 느낌(색과 위치의 기술은 할애)
    <div class="squares">
  <div class="square square-red">z-index:2</div>
  <div class="square square-green">
    z-index:3
    <div class="square square-blue">z-index:1</div>
  </div>
</div>

    .squares {
  position: relative;
}

.square {
  position: absolute;
  width: 10rem;
  height: 10rem;
}

.square--red {
  z-index: 2;
}

.square--blue {
  z-index: 1;
}

.square--green {
  z-index: 3;
}



    · z-index가 1인 요소가 맨 위에 표시됨
    · 이것은 z-index가 3인 부모 요소가 기점이기 때문에
    · 각 요소의 중첩 순서는 아래 표와 같습니다.


    칼라
    z-index
    스택 컨텍스트
    오버랩 순서


    레드
    2
    루트
    root→빨강(z-index:2)

    블루
    1
    녹색
    녹색(z-index:3)→파랑(z-index:1)

    녹색
    3
    루트
    root→녹색(z-index:3)


    파란색은 z-index : 3의 녹색을 기점으로하므로 맨 위에 표시됩니다.

    요약



    z-index를 사용할 때 시작점에주의하십시오.
    • Nuxt.js의 http 클라이언트 사용 (Get)
    원격 시대의 프레젠테이션 서비스 슬라이드 액트 출시

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage