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

You need to specify position:

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