css positioning z-index negative margins

Question

I have the following html - no matter what i do I cant seem to get the middle div to appear on top of the top and also on top of the bottom. It sits fine above the top but where

Answer 1

If you mean "on top" by hiding the first one while seeing the second, you should add "position:absolute" If you mean by order, you can use the following lines:

var d = getElementById("..."); var p = d.parentNode; p.removeChild(d);

and than add to index, or add all of them anew in the required order.

Answer 2

z-index is useless on a static positioned element. try position:relative. if negative margins don't work out for you, use top or bottom and negative values.

Answer 3

You need to specify position:

#connector{
    position:relative;
    height:200px;border:10px solid black;
    background:blue;
    margin-bottom: -100px;   
    z-index: 21;
}