CSS z-index property

Question

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?

Answer 1

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;
}

Answer 2

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.

Answer 3

it's not a z-index problem. your div id="dates" actually cropped by your div id=page_content

Answer 4

将styles.css中#page_content的溢出从隐藏更改为可见

Answer 5

Z-index works, it's overflow:hidden in combination with position:relative for #page_content that causes clipping. The easiest way to fix this, IMO, is to add another div wrapper inside #page_content and to move overflow:hidden to this inner div . Without position:relative , overflow:hidden will not clip absolutely positioned descendants of this div , and the page will look as planned.