IE-8 z-index Issue With Fixed Positioned Elements

Published On: 31 May, 2015 Updated On: 09 Mar, 2016

Internet Explorer 7 or 8 sometimes behave strangely with elements which are fixed positioned. These browsers when encounter elements with fixed position, sometimes fail to render properly thereby making elements behind that element accessible.

E.g. if there is any anchor link behind the pop-up (which is fixed positioned), you’ll be able to click on that anchor link too. Even if you give that pop-up a z-index of millions, you will not be able to fix this issue. So, there is something more to explore than meets the eye. So without further delay, let’s start!

Problem Statement

Imagine that you have developed a web application which external publishers are going to use on their websites using iFrame. The iFrame resides inside a container which is “fixed” positioned.

So, basic layout can be derived as it is given below:


<div id="webAppContainer">
  <iframe 
    width="100%"
    height="100%"
    src="//great-apps.com/my-app.html"
    border="0"
    allowtransparency="true">
  </iframe>
</div>


#webAppContainer
{
  width: 400px;
  height: 600px;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 5%;
}

Now, coming to “my-app.html”, contents of it is something like this. It has two slides.

  1. Welcome Slide
  2. Inner Slide

The slides are placed one beside the other using “relative” position so that with given container width, the slides having same width can be made slide left or right. Initially, Welcome screen is displayed. User selects any option, this screen slides left to display Inner screen. To accomplish this, we are using UL tag with child nodes.

Below is the derived html and css code for my-app.html respectively.


<div id="slidesContainer">
  <ul id="slideList">
    <li id="slide1">
      <!-- Content for Slide 1 -->
    </li>
    <li id="slide2">
      <!-- Content for Slide 2 -->
    </li>
  </ul>
</div>


ul#slideList
{
  width: 800px;
  height: 600px;
  position: relative;
  left: 0;
}

ul#slideList > li#slide1,
ul#slideList > li#slide2
{
  width: 400px;
  height: 600px;
  float: left;
}

ul#slideList > li#slide1
{
  background: url("//imgs.com/welcome-screen.jpg") no-repeat;
}

In order to slide the Welcome screen to the left, we just need to update “left” CSS property of “ul#slideList” with some negative value. Hope, you got it, right!

Well. Since everything is setup, let’s imagine we’re viewing this app in IE8. Slide1 is shown, we clicked on something, it slides to left displaying Slide2. Now, hover over the Slide2, if there is something behind that screen like we discussed at the beginning, you can still access it(which should not happen, ideally). So, what do we do now, how do we fix it?

If we dig a little, we find the difference that slide1 has a background image, but slide2 don’t. And the issue only exists for slide2, not slide1. Internet Explorer 8 behaves strangely here. In this kind of cases, if there is no background property attached to the element, it will simply ignore z-index properties and make the element transparent.

So, in order to fix this, we’ll update CSS code like below:-


ul#slideList
{
  width: 800px;
  height: 600px;
  position: relative;
  left: 0;
}

ul#slideList > li#slide1,
ul#slideList > li#slide2
{
  width: 400px;
  height: 600px;
  float: left;
}

ul#slideList > li#slide1
{
  background: url("//imgs.com/welcome-screen.jpg") no-repeat;
}

ul#slideList > li#slide2
{
  background-color: #FFFFFF;
}

And now, Internet Explorer 8 can render it properly. And so, the issue is solved. Thank you for reading this blog. Hope you found the solution needed. Please don’t hesitate to comment. Thank you!

Like this blog ? Share it on your favourite social network.
Search powered by Google

Didn’t find what you were looking for? Try here.

Template Monster

Where you can search over 26K+ Premium Templates.

Now, get flat 10% discount by using “b3fbdxkv49mosrt59dsh0dx29” promo-code.

Email NewsLetter

By subscribing, you’ll get access to latest blogs and other resources. Also, whenever there is any new content addition here, you’ll receive those updates directly to your inbox.

NOTE: I’m a strict antispammer. So you don’t have to worry about spams.

This website is designed by keeping modern browsers in mind. Never mind about legacy browsers. It’s high time we upgrade ourselves.

The website and its contents are created, edited and maintained solely by me (Santosh K Shetty). No one else shall possess any kind of resources unless explicitely mentioned.

Some of the Creative Credit goes to FreePik.

Copyright © from Jun 2014 to May 2018

Table  Of  Contents
On this page,