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

Program / 글쓴이

나는이 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 깨기 ) 만족스러운 답변이 없으므로 여기에 예제 코드로 묻습니다.)

답변

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

솔루션

<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- 인덱스 값을 가진 배치 된 요소 (및 해당 하위 요소)

답변

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>

스 니펫 확장

깡깡이

답변

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

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

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

답변

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

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

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

답변

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

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

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

답변

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

답변

요소가 정상 흐름 외부에 배치되면 다른 요소와 겹칠 수 있습니다.

http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp의 겹치는 요소 섹션에 따라