Z-index problem

HTML & CSS
1

I’m having a z-index problem on this page:
http://boxer.webventions.com/Portfolio

I’ve tried changing a z-index value on almost every element and can’t get it right.

Any ideas?

Thanks
E

A snippet of the css is below:

/* Portfolio */ 

#wrapper .portfolio {
	padding:12px;
}

.portfolio .col3,.portfolio .col1,.portfolio .col2{
	width:795px;
	margin-bottom:20px;
	background:url('../assets/design/portfolio_boxes.png') 0 top;

	
}

.portfolio .col2{
	width:530px;
}

.portfolio .col1{
	width:270px;
}


.portfolio .col3 .bottom_cap, .portfolio .col2 .bottom_cap, .portfolio .col1 .bottom_cap{
	display:block;
	position:relative;
	top:15px;
	height:15px;
	background:url('../assets/design/portfolio_boxes.png') 0 -645px;
}

.portfolio  .column{
	position:relative;
	top:15px;
	width:220px;
	float:left;
	padding:0px 18px ;
	margin-right:10px;
	z-index:99;
}

*html .portfolio  .column{
	width:200px;
	margin:0;

}

#wrapper .portfolio  .last{
	margin-right:0px;
}

.go_button {
	position:relative;
	height:23px;
	width:25px;
	float:right;
	margin:-5px 0 0 0; 
}

.go_button span{
	position:absolute;
	top:0;
	left:0;
	height:23px;
	width:25px;
	background:url('../assets/design/sprites.png') -517px -108px;
}

*html .go_button span{
	background:url('../assets/design/sprites.gif') -517px -108px;
}

.go_button:hover span{
	background-position:-541px -108px;
}

.go_button:active span{
	background-position:-567px -108px;
}

.portfolio h1 {
	margin-bottom:10px;
}

.portfolio h2 {
	text-transform:uppercase;
	font-weight:normal;
	color:#666;
	margin-bottom:10px;
	font-size:14px;
	text-align:center;
	margin-top:0;
	padding-top:0;
}

.portfolio .text {
	width:100px;
	float:right;
	font-size:10px;
	color:#666;
}

.portfolio .thumb {
	position:relative;
	float:left;
	width:100px;
}

.portfolio .images {
	position:relative;
	position:relative;
	z-index:99;
}

.portfolio .popup {
	position:absolute;
	z-index:9999;
	left:0;
	top:0;
	display:none;
}
2

Thanks.
Michael

3

There’s a popup?

4

If you are talking about the popup underlapping the headings of subsequent boxes then its because each box is set to position:relative and therefore the ones that follow later in the html will always be on top.

Remove the stacking context and then the popup should always be on top.

e.g.


.portfolio .column {
[B]    /*position:relative;
    top:15px;*/
    margin-top:15px;[/B]
    width:220px;
    float:left;
    padding:0px 18px;
    margin-right:10px;
    /*z-index:99;*/
}

Otherwise you would need to set a descending z-index on each subsequent box so that the one before is always on top which is obviously a lot of work and not manageable in a dynamic environment.

5

I’m sorry, but I can’t see anything wrong with the site you linked to. Could you specifically state
-which browser you are having a problem in? (I looked in Firefox on Linux)
-what part of the page you have issue with?
-why do you think it’s a z-index issue??

Most of the time, you don’t bother stating z-index on element. If you mean the little play-looking button, that type of image replacement usually also doesn’t need stated z-indeces, because the abso-po’d span usually natually sits above the other elements. Why does .column have relative positioning and a z-index?

6

Yes IE is a bit of a pain sometimes.:slight_smile:

I had the popup working fine in my original post because I copied the code locally to test so I know it works but of course you may have changed something since then. It doesn’t matter if you have solved the issue anyway and I was just remarking in case anybody else had a similar problem :slight_smile:

7

I appreciate the effort. Thank you. E

8

My fix in post #3 would have solved the problem without javascript.:slight_smile:

IE<8 assign a z-index of zero to positioned elements when it should in fact be “auto”. Auto basically means no stacking level which allows children to escape the confines of their parent and overlap other elements.

If you remove the relative positioning from the parent then the popup works as expected as long as you didn’t need the relative position on the parent for something else.

Otherwise setting the parent when hovered to have a higher z-index will do the trick for IE7 but IE6 would need some js help. :slight_smile:

9

I finally figured out how to get this working right in IE6 and IE7. I learned a whole lot about z-index in the process.
The problem is that elements that really shouldn’t have a z-index value are assigned one and the popup is below the level in the hierarchy.
Because of this there would be no way to make the pop up show up on top with this layout with css alone.
The fix required dynamically setting all the parent ‘column’ containers with javascript to 1 and setting the current one to 999.

E

10

I tried that but couldn’t get it to work right. All I can say is IE sucks.

E.

11

If the parent of an element is positioned and has a z-index applied then ultimately it’s the parent’s z-index that dictates whether one parents child overlaps the child of another parent.

If a parent is z-index 1 and its children are z-index:1000 the children (and the parent) will not overlap another parent or any children where that parent that has a z-index of 2 or higher.

You can’t intermingle children from different parents if the parent is positioned (in ie7 and under).

A positioned element should get a z-index of auto by default which is basically no z-index (not the same as zero) and this would allow children to overlap other children. However IE7 and under get this wrong and apply a z-index of zero by default instead of auto and thus making the stacking [URL=“http://www.w3.org/TR/CSS2/visuren.html#z-index”]atomic (dictated by the parent) .

12

I just discovered something I didn’t realize before:

That the z-index is only relevant to elements in the same level. Nested blocks don’t respond two each other.