CODEWITHSUNDEEP
cssoverflowoverlap
medihack
medihack

Reputation: 16627

Overlapping an element from a belower z-index

I have some problems understanding an overlap of divs in Javascript.

See http://jsfiddle.net/CapKK/

As you can see the green box is wrapped by those two others. But as soon as I add a z-index to div1 (the red box) it doesn't work anymore.

Can someone explain that? Why does a z-index of 0 on div1 destroys this setup?

Upvotes: 1

Views: 1430

Answers (1)

enthusiastic
enthusiastic

Reputation: 742

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

The div3 have a greater stack order that's why its on front.

If you add more elements to the page later, you have room to layer them in without having to adjust the z-index values of all the other elements. For example:

* 100 for my top-most element
* 0 for my middle element
* -100 for my bottom element

You can also give two elements the same z-index value. If these elements are stacked, they will display in the order they are written in the HTML, with the last element on top.

You can give each element you want layered a different z-index value. For example, if I have five different elements:

* element 1 — z-index of -25
* element 2 — z-index of 82
* element 3 — z-index not set
* element 4 — z-index of 10
* element 5 — z-index of -3

They will stack in the following order:

  1. element 2
  2. element 4
  3. element 3
  4. element 5
  5. element 1

Upvotes: 2

Related Questions