Z- 인덱스를 사용하여 인터리브 된 레이어를 관리하는 방법

여러 개의 인터리브 레이어를 관리하는 데 어려움이 있습니다. 내가 가장 먼 요소에서 시작하는 경우Z- 인덱스를 사용하여 인터리브 된 레이어를 관리하는 방법

I reproduced my issue in this Plunker example

<body> 
<header> 
    <nav class="navbar"> 
     <ul class="navbar-nav"> 
     <li class="nav-item dropdown"> 
      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Dropdown link 
      </a> 
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
      </div> 
     </li> 
     </ul> 
    </nav> 
</header> 
<nav class="navbar row filter"> 
    <form class="form-inline"> 
    <input name="search" class="form-control" type="text" size="30"/> 
    </form> 
</nav>

header { 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: 100%; 
    position: relative; 
    height: 80px; 
    z-index: 100; 
} 

header .navbar { 
    padding:0; 
} 

.dropdown-menu { 
    z-index:300; 
} 

.filter { 
    margin-top:-20px; 
    background-color: black; 
} 

.filter form { 
z-index:200; 
}

, 나는이 있어야합니다

필터 표시 줄 컨테이너
헤더 컨테이너
필터 막대 컨텐츠 (입력)
헤더 콘텐츠 (메뉴)

그래서 I 지정된 :

필터 막대를 올려 갈 Z- 색인 (100)와 헤더
헤더를 마우스를 이동하는 Z- 색인 (200)와 필터 막대 콘텐츠
드롭 다운 메뉴 z-index 300을 사용하여 모든 구성 요소를 검토합니다.이 필터는 필터 막대 내용 아래에 있습니다 ... 왜?

나는 CSS의 전문가가 아니지만이 디자인을 구현하는 데 더 좋은 방법이 있을지 모르겠지만 드롭 다운 메뉴가 모든 구성 요소가 아닌 이유를 이해할 수 없습니까?

출처

2017-05-12 JoG

간단한 아래 NAVBAR하는 Z- 인덱스를 추가해야합니다.

header { 
    z-index: 301; 
} 

navbar{ 
    z-index: 300; 
}

재미

편집 유무 : 당신이 plunker의 예에서 볼 수있는 것처럼, 당신이 정확하게 원하는 you can take a look at this

출처

2017-05-19 13:50:14

이 경우, 헤더의 투명한 이미지가 그 위에 있기 때문에, 포커스가없는 입력의 맨 ... .... – JoG

당신은 헤더에서 Z- 인덱스를 제거하고 그냥 헤더 & 네비게이션 바 사이의 Z- 인덱스를 조정해야 :)

header { 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAABkCAYAAAB+UVSPAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAEZUlEQVR4Xu3XIY5dRxiE0UfihRhkA/YGQgwshWRDExhsltVez8iGTbuqwDnSp3m6/Nd0vR4AIO/f/37/AKrcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYpwBAgANHj2wwS3GGSAA0ODRAxvcYtzr8x+fHkmSlO356+/n+5cvksp93OLpRnWv1/Pn10eSJEmSEhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJiGSCSJEmSYhkgkiRJkmIZIJIkSZJifQyQN0mSFO/jH/Hpu6RsbjHc690jSZKyPd/+ed7e3iSV+7jF043qYs8jSZLi/fj//Q9Q9+sWz3eqKx0/SpKkyxkgsMEAiXf8KEmSLmeAwAYDJN7xoyRJupwBAhsMkHjHj5Ik6XIGCGwwQOIdP0qSpMsZILDBAIl3/ChJki5ngMAGAyTe8aMkSbqcAQIbDJB4x4+SJOlyBghsMEDiHT9KkqTLGSCwwQCJd/woSZIuZ4DABgMk3vGjJEm6nAECGwyQeMePkiTpcgYIbDBA4h0/SpKkyxkgsMEAiXf8KEmSLmeAwAYDJN7xoyRJupwBAhsMkHjHj5Ik6XIGCGwwQOIdP0qSpMsZILDBAIl3/ChJki5ngMAGAyTe8aMkSbqcAQIbDJB4x4+SJOlyBghsMEDiHT9KkqTLGSCwwQAJ97x+AgOVhW80idDhAAAAAElFTkSuQmCC); 
    background-repeat: no-repeat; 
    background-position: top center; 
    background-size: 100%; 
    position: relative; 
    height: 80px; 
} 

navbar{ 
    z-index: 100; 
}

출처

2017-05-12 09:45:16

을 이해 한 후, 헤더는 필터 줄 이상이어야한다. 헤더에는 필터 막대 위에 있어야하는 흰색 직사각형이있는 배경 이미지가 있습니다. 그것은 왜 내가 헤더에 Z- 인덱스를 두는가입니다. – JoG

Z- 인덱스를 사용하여 인터리브 된 레이어를 관리하는 방법

답변

관련 문제