헤더에서 슬라이드하는 드롭 다운 메뉴를 만들려고합니다. 헤더가 있고 그 안에 테두리 하단 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
-
답변 # 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>
관련 자료
- css - 자식 요소에` - not (: last-child)`를 사용하면 실제 마지막 요소를 건너 뛰지 않습니다
- javascript - Kendo UI에서 상위 그리드의 데이터 소스를 사용하여 하위 그리드의 데이터 소스 설정
- css - 하위 요소의 Z- 색인 문제
- html - 패딩 및 배경색 세트를 사용할 때 Z- 색인이 작동하지 않습니다
- javascript - 부모가 변경 되어도 자식 범위는 색상을 변경하지 않습니다
- dependency injection - 단순 주입기를 사용할 때 부모 폼에서 자식 winform 속성 설정 C #
- 속성 접근자를 사용하는 Typescript가 인터페이스를 확인하지 않습니다
- html - 부트 스트랩 4에서 반응 형 문제를 해결하는 방법
- html - 벽돌 레이아웃 그림자가 잘립니다
- html - 본문 태그의 배경 이미지가 표시되지 않습니까?
- javascript - 난수로 버튼을 클릭하면 div의 너비를 줄입니다
- html - navbar React에 이미지 로고와 브랜드 이름을 멋지게 배치
- html - 요소가 주변 요소의 위치를 변경하지 못하도록 방지
- html - CSS를 사용하여 카드 크기를 조정하는 방법
- html - 제목 텍스트/본문 텍스트로 div 상자를 만드는 방법
- javascript - 가로 스크롤 가능 컨테이너를 만드는 방법에 여러 행이 포함되어 있습니다
- html - 부트 스트랩 - colapse 아코디언이 작동하지 않음
z- 색인은 DOM에서 동일한 수준의 요소, 즉 동일한 부모를 가진 요소를 기반으로합니다.
당신의
class="dropdown"
이후 요소는class="background"
의 자식입니다 요소는 부모 아래에있을 수 없습니다.