Anees Ijaz Anees Ijaz - 5 months ago 20
CSS Question

why z-index is not working for div elements with absolute positions

Here is my website html code. I am new to html and also new to stackoverflow so I have no experience of asking question so please if there are mistakes ignore them.
I am creating a search page with fixed header and fixed left sidebar but every time i try this the main div of search shows above title div.I need help to resolve this issue.

Here is the html code of that page





header{
display: block;
left:0;
width: 100%;
height: 40px;
background-color: #333;
z-index: 20;
}
body{
background-color: #f2f2f2;
width: 100%;
bottom:0;
overflow: auto;

}
#main{
clear: both;
display:block;
position: relative;
width: 98%;
margin: auto;
height: 100%;
background-color: white;
}
#fixed_top{
display: block;
position: absolute;
width:100%;
z-index: 20;
}
#search_top_fixed_header{
display: block;
position: fixed;
width: 98%;
margin-left: 1%;
z-index: 20;

}
#aside_wrapper{
display: block;
position: absolute;

width: 30%;
height:100%;
}
#left_aside{
display: inline-block;
position: fixed;
width: 30%;
top:200px;
background-color: black;
height:100%;
}
#main_search_wrapper{
display: block;
position: absolute;
width: 68%;
right:1%;
top: 200px;
height:100%;
background-color: brown;
}
#mains{
display: block;
position: relative;
width: 98%;
height: 100%;
margin-left:1%;
background-color: white;
}
#search_heading{
margin-top: 20px;
}

<body>
<div id="fixed_top">
<div id="search_top_fixed_header">
<header>
<h1 id="logo">
Naats.com
</h1>
<span id="search">
<form name="header_search" id="header_search" action="" method="get">
<input type="text" id="search_bar" name="searchq" autocomplete="off" placeholder=" search naat.com" /><button id="search_submit"></button>
</form>
</span>
<span id="login_logout_header">
<a href="#1"><img src="./images/header_login_button.png" id="header_login_button"></a><span style="display:inline;height:20px;bottom:13px;line-height:40px;position:relative;color:white">OR</span><a href="#2"><img src="./images/header_signup_button.png" id="header_signup_button"></a>

</span>
</header>
<h1 id="search_heading">Search results for "anees ijaz"</h1>
<hr>
</div>
</div>
<div id="mains">
<div id="aside_wrapper">
<aside id="left_aside">
a
</aside>
</div>
<div id="main_search_wrapper">
a
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>a
</div>
</body>




Answer

It's not an issue of z-index, the header part simply has a transparent background, and so when you scroll up, the red box will be moved in the viewport and will be visible under the header.

If you insist on using fixed positioning, you can simply add a white background to the header part by adding the following CSS:

#search_top_fixed_header {
  ⋮
  background: #FFF;
  top: 0;
}

Demo:

header {
  display: block;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #333;
  z-index: 20;
}

body {
  background-color: #f2f2f2;
  width: 100%;
  bottom: 0;
  overflow: auto;
}

#main {
  clear: both;
  display: block;
  position: relative;
  width: 98%;
  margin: auto;
  height: 100%;
  background-color: white;
}

#fixed_top {
  display: block;
  position: absolute;
  width: 100%;
  z-index: 20;
}

#search_top_fixed_header {
  display: block;
  position: fixed;
  width: 98%;
  margin-left: 1%;
  z-index: 20;
  background: #FFF;
  top: 0;
}

#aside_wrapper {
  display: block;
  position: absolute;
  width: 30%;
  height: 100%;
}

#left_aside {
  display: inline-block;
  position: fixed;
  width: 30%;
  top: 200px;
  background-color: black;
  height: 100%;
}

#main_search_wrapper {
  display: block;
  position: absolute;
  width: 68%;
  right: 1%;
  top: 200px;
  height: 100%;
  background-color: brown;
}

#mains {
  display: block;
  position: relative;
  width: 98%;
  height: 100%;
  margin-left: 1%;
  background-color: white;
}

#search_heading {
  margin-top: 20px;
}
<!-- header -->
<div id="fixed_top">
  <div id="search_top_fixed_header">
    <header>
      <h1 id="logo">Naats.com</h1>
      <span id="search">
        <form name="header_search" id="header_search" action="" method="get">
          <input type="text" id="search_bar" name="searchq" autocomplete="off" placeholder="search naat.com" />
          <button id="search_submit">search</button>
        </form>
      </span>
      <span id="login_logout_header">
        <a href="#1"><img src="./images/header_login_button.png" id="header_login_button"></a>
        <span style="display:inline;height:20px;bottom:13px;line-height:40px;position:relative;color:white">OR</span>
        <a href="#2"><img src="./images/header_signup_button.png" id="header_signup_button"></a>
      </span>
    </header>
    <h1 id="search_heading">Search results for "anees ijaz"</h1>
    <hr>
  </div>
</div>

<!-- main container -->
<div id="mains">

  <!-- sidebar -->
  <div id="aside_wrapper">
    <aside id="left_aside">
      a
    </aside>
  </div>

  <!-- content -->
  <div id="main_search_wrapper">
    a
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>a
</div>

jsFiddle: https://jsfiddle.net/azizn/odz66vp8/1/

P.S It is not recommended to place block-level elements such as <form> inside an inline element like <span> (semantically speaking).

Comments