Question

I’m using a div with position: fixed to overlap an image. This works fine in firefox, but not in IE8. The div just sits below the image, even if I play with the top and left parameters.

Example of my Problem

Is this a known bug?

Answer 1

This is not the only way but should give you good starting point at least.

http://jsfiddle.net/lollero/EREc7/ – Parent element that has position: relative; makes sure that the element with position: absolute being the overlapping div would stick with the image no matter where you put the image.

http://jsfiddle.net/lollero/EREc7/1/ – The same with border

---

You can also do something like this:

position: relative;
z-index: 4 /* The higher the number the higher the element is. make sure to*/
top: -50px;
left: 0px;

---

And something like this:

http://jsfiddle.net/lollero/EREc7/3/

---

Note that the first one is the most flexible one.

---

Here’s a bit bigger example

http://jsfiddle.net/lollero/EREc7/4/

---

Examples from the comments:

http://jsfiddle.net/lollero/nBk79/1

http://jsfiddle.net/lollero/nBk79/6/