홈>2020-02-01 01:25

html - z-index를 사용하는 CSS는 부모 뒤에 자식 요소를 배치하지 않습니다

헤더에서 슬라이드하는 드롭 다운 메뉴를 만들려고합니다. 헤더가 있고 그 안에 테두리 하단 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을 하위 요소로 사용할 수 없습니다.

htmlcss

답변 # 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>

Python2.net

html - z-index를 사용하는 CSS는 부모 뒤에 자식 요소를 배치하지 않습니다

관련 자료