고정 위치 지정과 함께 작동하지 않는 z- 색인

422

나는이 div기본 위치 (즉와 position:static)과 divA의 fixed위치.

요소의 z- 색인을 설정하면 고정 요소를 정적 요소 뒤에 놓는 것이 불가능 해 보입니다.

    #over {
      width: 600px;
      z-index: 10;
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
       <body>
          <div id="over">
             Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
          </div>  
          <div id="under">
          </div>
       </body>
    </html>
스 니펫 확장

또는 여기 jsfiddle에서 : http://jsfiddle.net/mhFxf/

position:absolute 정적 요소 를 사용 하여이 문제를 해결할 수 있지만 왜 이런 일이 발생 하는지 말해 줄 수 있습니까?

(이 질문과 비슷한 질문이있는 것 같습니다 ( 고정 위치 지정 z-index 깨기 ) 만족스러운 답변이 없으므로 여기에 예제 코드로 묻습니다.)

css  z-index 
— 단 싱어 맨
소스

답변:

146

이 질문은 여러 가지 방법으로 해결할 수 있지만 실제로 누적 규칙을 알면 가장 적합한 답변을 찾을 수 있습니다.

솔루션

<html>요소는 그래서 그냥 스태킹 컨텍스트 내부에 적재 규칙을 준수하고 해당 요소의 순서로 적층 볼 것이다, 당신의 유일한 스태킹 맥락이다

  1. 스택 컨텍스트의 루트 요소 ( <html>이 경우 요소)
  2. 음수 z- 인덱스 값을 가진 배치 된 요소 (및 해당 하위 요소)
  3. 배치되지 않은 요소 (HTML에서 모양별로 정렬)
  4. z-index 값이 auto 인 배치 된 요소 (및 해당 하위 요소) (HTML에서 모양으로 정렬)
  5. 양의 z- 인덱스 값을 가진 배치 된 요소 (및 해당 하위 요소)

그래서 당신은 할 수 있습니다

  1. #under배치 된 -ve z- 인덱스가 비 배치 #over요소 뒤에 나타나는 경우 z- 인덱스를 -1로 설정
  2. 위치 설정 #over하는 방법에 대해 relative해당 규칙 (5)가 적용되도록

진짜 문제

개발자는 요소의 스택 순서를 변경하기 전에 다음을 알아야합니다.

  1. 스태킹 컨텍스트가 형성 될 때
    • 기본적으로 <html>요소는 루트 요소이며 첫 번째 스태킹 컨텍스트입니다.
  2. 스태킹 컨텍스트 내에서 스태킹 순서

아래의 스태킹 순서 및 스태킹 컨텍스트 규칙은이 링크에서 가져옵니다.

스태킹 컨텍스트가 형성 될 때

  • 요소가 문서의 루트 요소 인 경우 ( <html>요소)
  • 요소에 static 이외의 위치 값과 auto 이외의 z- 색인 값이있는 경우
  • 요소의 불투명도 값이 1보다 작은 경우
  • 몇 가지 최신 CSS 속성도 스태킹 컨텍스트를 만듭니다. 여기에는 변환, 필터, CSS 영역, 페이징 된 미디어 및 기타가 포함됩니다. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • 일반적으로 CSS 속성이 오프 스크린 컨텍스트에서 렌더링해야하는 경우 새 스태킹 컨텍스트를 만들어야합니다.

스태킹 컨텍스트 내에서 스태킹 순서

요소의 순서 :

  1. 스택 컨텍스트의 루트 요소 ( <html>요소는 기본적으로 유일한 스택 컨텍스트이지만 모든 요소는 스택 컨텍스트의 루트 요소 일 수 있습니다 (위 규칙 참조))
    • 루트 스태킹 컨텍스트 요소 뒤에 자식 요소를 넣을 수 없습니다
  2. 음수 z- 인덱스 값을 가진 배치 된 요소 (및 해당 하위 요소)
  3. 배치되지 않은 요소 (HTML에서 모양별로 정렬)
  4. z-index 값이 auto 인 배치 된 요소 (및 해당 하위 요소) (HTML에서 모양으로 정렬)
  5. 양의 z- 인덱스 값을 가진 배치 된 요소 (및 해당 하위 요소)
— Mr_Moneybags
소스
3
일부는이 정보가 도움이 너무 찾을 수 있습니다 무엇 아무도 Z-인덱스에 대해 당신에게 말한
— 멘탈
450

position: relative;#over에 추가

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #fff;
      z-index: 1;
    }
    <!DOCTYPE html>
    <html>
    <body>
    	<div id="over">
    		Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    	</div>  
    
    	<div id="under"></div>
    </body>
    </html>
스 니펫 확장

깡깡이

— 스티븐 머독
소스
14
updates.html5rocks.com/2012/09/… 는 위치 고정, 절대 및 상대가 z- 인덱스와 상호 작용하는 방식에 대한 훌륭한 참고 자료입니다.
— 나요
@marflar 나의 기쁨. Btw, 당신의 바이올린을보세요. 끝에 여분의 태그 </body>와 여분의 태그 </html>가 있습니다.
— Michel Ayres
2
다음은 스태킹 컨텍스트를 보여주는 바이올린 입니다. 여기에 설명되어 있습니다 .
— kdbanman
position: relative오버 요소에서 제거하면 실제로 문제가 해결되었습니다.
— Alex G
thanksssssss <3
— Karl Anthony Baluyot
32

Z- 인덱스는 단지 특정 상황에 맞는 즉 내에서 작동 relative, fixed또는 absolute위치.

상대 div의 z- 색인z-index 은 절대 또는 고정 div 와 관련이 없습니다 .

편집 이것은 불완전한 답변입니다. 이 답변은 잘못된 정보를 제공합니다. 아래 @Dansingerman의 의견과 예를 검토하십시오.

— cusimar9
소스
3
특정 상황에서 z-index의 작동 방식을 확장하거나 참조를 제공 할 수 있습니까?
— DanSingerman
13
z- 색인은 하나가 위치 상대이고 다른 하나는 절대 인 경우에도 두 div의 순서에 영향을줍니다.
— Raffael
65
이 답변은 잘못되었습니다. 여기에 설명 된 스태킹 컨텍스트를 보여주는 바이올린 이 있습니다 . @Dansingerman.
— kdbanman
1
jsFiddle @kbdanman에게 감사합니다. 시각적으로 스택 컨텍스트를 이해하는 데 도움이되었습니다.
— dhruvpatel
8
@JoeMorano, 절대 또는 상대 위치에 관계없이 높은 z는 상단에 더 가깝습니다. 중요한 것은 문서 트리의 수준입니다. div 4, 5, 6은 div 3의 자식이고 div 1과 2는 div 3의 형제입니다. Div 1은 div 3보다 z가 높으므로 div 1은 div 3과 모든 자식 위에 있습니다. DIV 3와 아이 모두 DIV 2의 상단에 위치하도록 사업부 2 DIV 3보다 낮은 Z를 가지고
— kdbanman
31

당신 때문에 over사업부는 위치가없는, Z- 인덱스 어디에 어떻게 위치를 알 수 없습니다 (무엇에 대한?)를. 오버 div의 위치를 ​​상대로 변경하면 해당 div에 부작용이 없으며 아래 div는 귀하의 의지에 따릅니다.

다음은 jsfiddle에 대한 예입니다. Fiddle

편집 : 이미이 답변을 언급 한 사람이 있습니다!

— 난 진지해
소스
18

주고받는 #under마이너스 z-index, 예를 들어,-1

이 z-index속성은에서 무시 position: static;되므로 기본값이됩니다. 그래서 당신이 쓴 CSS 코드, z-index없는 1상관없이 당신이 그것을 설정하는 방법 높은 두 요소 #over.

제공함으로써 #under음의 값을, 어떤 뒤에있을 것 z-index: 1;, 즉 요소 #over.

— 카를로스 프레시 오소
소스
나는이 문제도 가지고 있었다- 'under'div를 0으로 설정하면 나를 위해 일했다.
— Mick Sear
5

탐색 메뉴를 만들고있었습니다. 내가 가진 overflow: hidden모든 것을 숨긴 내 탐색의 CSS에서. z-index 문제라고 생각했지만 실제로 내 탐색 외부의 모든 것을 숨기고있었습니다.

— 테다 노토
소스
0

CSS 사양에 정의 된 고정 요소 (및 절대 요소)의 동작 :

문서에서 분리되어 가장 가까운 고정 / 절대 위치 상위에 배치 될 때 작동합니다. (단어 따옴표로 단어가 아님)

이렇게하면 zindex 계산이 약간 복잡해집니다. 본문 요소에 컨테이너를 동적으로 만들고 해당 요소 수준을 해당 본문 수준 요소 내에서 "my-fixed-ones"로 분류 된 모든 요소를 ​​이동하여 내 문제 (같은 상황)를 해결했습니다. )

— 박시
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.