Q:

CSS z-index property

Really hoping someone can help a z-index novice.
I'm trying to position a div on top of everything else on my page:
http://www.designbyantony.com/bipf/index.html
The div (you can probably see the problem) is the roun blue circle with 'March 6-8 2015'.
I'd like it to sit on top of everything else properly - ie: run over the nav bar a bit and chip over the area which has the repeating 'arch' design.
I've tried using z-index but I'm obviously going wrong somewhere.
CSS is at 
http://www.designbyantony.com/bipf/styles.css
Can anyone help me?

A:

Change into your CSS like that.Remove the both position:relative from CSS
#page_content {
width: 970px;
margin: auto;
height: auto;
padding-top: 15px;
padding-left: 5px;
padding-right: 5px;
/* position: relative; */
background-color: #FFFFFF;
overflow: hidden;
/* position: relative; */
z-index: 2;
 }

and again change your CSS of #dates.remove left position left:1046;top: 171px; and put there right:0
 #dates {
position: absolute;
left: 1046px;
top: 171px;
z-index: 10000;
height: 140px;
width: 140px;
display: block;
 background-color: none;
}

A:

Remove overflow: hidden in the #page_content in styles.css at Line 245:
#page_content {overflow: visible;}

Or if you would like to have clearing after the #page_content, you can use something like this:
#page_content:after {display: block; clear: both; content: " ";}

Reason: The parent of #dates is been cropped by #page_content, which has overflow: hidden, that doesn't allow contents to be hanging.

