put <hr> in front of outline

Question

I have a content div which has the following attributes:

   { max-width: 1200px;
     margin: 0 auto;
     border: 3px solid #808080;
     outline: 10px solid #E3E3E3;
     background-color: #FFF;
  }

In this div I have a hr which overlays the left border:

<div id="headerhr" class="stretchRight"><hr color="#921E27" style="height: 1px;"></div>

#headerhr {
margin: 0 0 0 -50px;
}

This works, but the hr lays under the outline border. How can i put the hr in front of (over) the outline?

Answer 1

You want to add a z-index to your hr so it overlay's on top, but for this to work you will need to asign a position: relative; for the z-index to work.

See this example

Try this:

#headerhr {
    margin: 0 0 0 -50px;
    z-index: 999;
    position: relative;
}