CODEWITHSUNDEEP
cssinternet-explorer-7z-index
neshpro9
neshpro9

Reputation: 434

z-index is not working properly in IE7

Here is the scenario:

enter image description here

I was trying to put search div (black color) on top of nav (slate blue color) using z-index for IE7 but its not working.

Here goes the dummy Markup: 

<div id="header">
  <div class="container">
    <div id="search"></div>
  </div>

  <div class="container">
    <div id="nav"></div>
  </div>
</div>

On CSS rule, #header is positioned as relative where #search & #nav are positioned as absolute. Any idea, how can I put the #search on top of #nav?

NOTE: for some reason, I need to put them in two different div. My CSS worked properly with IE8.

Upvotes: 1

Views: 66

Answers (2)

neshpro9
neshpro9

Reputation: 434

Thanks to @Pete as his answer gave me a clue to solve this! :) I'd like to share it:

For the second .container, I've set z-index: -1; & that worked for me!

Upvotes: 0

Pete
Pete

Reputation: 58432

z-index on ie7 stacks the elements on the same level so you would need to apply the z-indexes to the .container divs to make it work properly

Upvotes: 1

Related Questions