>

헤더에서 슬라이드하는 드롭 다운 메뉴를 만들려고합니다. 헤더가 있고 그 안에 테두리 하단 1px 선 및 배경색이있는 div가 있습니다. 이 div 안에 로고, 검색 상자 일부 링크 및 사용자 프로필 버튼을 배치하고 싶습니다. 이 버튼을 클릭하면이 버튼 아래에 메뉴를 드롭 다운하고 싶습니다. 불행하게도이 드롭 다운 메뉴는 헤더 앞에 표시되며 헤더 뒤에서 슬라이드되지 않습니다 (헤더 배경 및 하단 경계선이 보이지 않음). 나는 아래와 같은 해결책을 시도했다 (간단한 버전이다).

header {
  position: relative;
  z-index: 5;
}
.dropdown {
  background-color: yellow;
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 1;
}
.background {
  position: absolute;
  background-color: #ccca;
  border-bottom: 1px solid black;
  width: 100%;
  height: 50px;
  z-index: 2;
}

<header>
  <div class="background">
    <div class="dropdown">
    </div>
  </div>
</header>

많은 z-index 구성을 시도했지만 그중 아무것도 작동하지 않는 것 같습니다. 1. z- 인덱스 2가있는 div.background, z- 인덱스 1이있는 div.dropdown 또는 -1 2. z-index 및 위치가없는 div.background, z-index -1이있는 div.dropdown (여기서 드롭 다운은 헤더 뒤에 있지만 메뉴 링크는 작동하지 않고 메뉴는 웹 페이지의 주요 내용 뒤에 있음)

배경과 경계선이있는 머리글 막대 뒤에서 div.dropdown을 슬라이드하려면 어떻게해야합니까? 헤더 div 트리 안에이 div.dropdown을 하위 요소로 사용할 수 없습니다.


  • 답변 # 1

    z- 색인은 DOM에서 동일한 수준의 요소, 즉 동일한 부모를 가진 요소를 기반으로합니다.

    당신의 class="dropdown" 이후  요소는 class="background" 의 자식입니다  요소는 부모 아래에있을 수 없습니다.

  • 답변 # 2

    음의 z- 색인으로 가능합니다. 그러나 자동이 아닌 z- 인덱스가있는 부모 요소에서는 작동하지 않습니다. .background 설정   z-index:auto 를 갖는 요소  (또는 그냥 벗어. auto  기본값입니다). 음수 z- 색인 요소가 <html> 아래로 떨어지지 않도록 양수 z- 색인 조상 요소를 갖는 것이 좋습니다 (및 권장되는 imo)  또는 <body>  집단. 이 경우, 당신은 ( header  z- 색인이 5)이므로 괜찮습니다.

    <html>
    <head>
    <style type="text/css">
    header { 
    	position:relative; 
    	z-index:5; 
    	
    }
    .dropdown { 
    	background-color: yellow;
    	width: 100px;
    	height: 100px;
    	position: absolute;
    	z-index: -1;
    }
    .background { 
    	position: absolute;
    	background-color:#ccca; 
    	border-bottom: 1px solid black;
    	width: 100%;
    	height: 50px;
    	z-index: auto;
    }
    </style>
    </head>
    <body>
    <header> 
    	<div class="background">
    		<div class="dropdown">
    		</div>
    	</div>
    </header>
    </body>
    </html>
    
    

  • 답변 # 3

    자식 요소는 부모 요소 아래에 표시 될 수 없습니다. 두 div를 이와 같은 요소로 분리하십시오.

    header { 
    	position:relative; 
    	z-index:5; 
    }
    .dropdown { 
    	background-color: yellow;
    	width: 100px;
    	height: 100px;
    	position: absolute;
      z-index: 1;
    }
    .background { 
    	position: absolute;
    	background-color:#ccca; 
    	border-bottom: 1px solid black;
    	width: 100%;
    	height: 50px;
    	z-index: 2;
    }
    
    
    <html>
    <head>
    </head>
    <body>
    <header> 
      <div class="background"></div>
      <div class="dropdown"></div>
    </header>
    </body>
    </html>
    
    

  • 이전 xcode - 소스 코드를 공유하지 않고도 iOS 프레임 워크를 공유 할 수 있습니까?
  • 다음 java - 점화에 연결하는 닷 NET 기본 접근 방식 대신 JDBC 점화와 함께 스프링 부트 웹 응용 프로그램을 사용하면 성능에 영향이 있습니까?