CODEWITHSUNDEEP
htmlcss
Michał Ziobro
Michał Ziobro

Reputation: 11762

CSS using z-index doesn't place child element behind its parent

I am trying to make a drop down menu that slides from header. I have a header and inside it I have some div with border-bottom 1px line and background-color. Inside this div I would like to place logo, searchbox some links and a user profile button. When this button is clicked I would like to drop down menu below this button. Unfortunately this dropdown menu appears in front of header and not slides from behind of header (obscuring the header background and bottom-border line). I have tried solution like below (it is simplified version). 

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>

I have tried many z-index configurations and none of them seems to work. 1. div.background with z-index 2, div.dropdown with z-index 1 or even -1 2. div.background without z-index and position, div.dropdown with z-index -1 (here dropdown was behind header but menu links stopped working and menu was also behind main content of webpage)

How can I make my div.dropdown to slide from behind the header bar with background and border bottom line? Isn't it possible to have this div.dropdown inside header div tree as the descendant element.

Upvotes: 5

Views: 2919

Answers (3)

Jaxon Crosmas
Jaxon Crosmas

Reputation: 477

Child elements cannot be displayed under their parent. Make the two divs seperate elements like this.

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>

Upvotes: 0

Joseph Marikle
Joseph Marikle

Reputation: 78530

This is possible with a negative z-index; however, it doesn't work with a parent element that has a non-auto z-index. Set the .background element to have a z-index:auto (or just take it off. auto is the default). It's OK (and recommended imo) to have an ancestor element with a positive z-index to avoid your negative z-indexed element dropping below the <html> or <body> elements. In this case, you do (header has a z-index of 5), so it's fine.

<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>

Upvotes: 3

Intervalia
Intervalia

Reputation: 10945

z-index is based on elements at the same level in the DOM, in other words, elements with the same parent.

Since your class="dropdown" element is a child of the class="background" element it can never be below its parent.

Upvotes: 2

Related Questions