Search code examples
htmlcssfooter

Why cant I z-index my comments and footer over my main content?

My WordPress site doesn't seem to let me z-index my comment section over my main content. My goal is to have my .column-left be fixed in position, but it overlaps everything below it. This is what I currently have that you will see live at jpshots.com

<div class="guts">
<div class="column-left"> copy </div>
<div class="colum-right"> gallery </div>
<div class="clear"></div>

.column-left{
float:left;
display: block;
width: 35%;
position: relative; 
height:100%;
z-index:1
}


#comments{
z-index:99999;
}

footer{
z-index:999999;
}

When I try to switch the position type of .column-left, it covers it up. Any insight would be greatly appreciated!

Solution

  • z-index does not work on position:static elements (which, mysteriously, is the default).

    z-index only affects elements that are position:relative, position:absolute and position:fixed.

    Try adding position:relative to your elements.

    Note that position:relative operates pretty much identically to position:static, but it also works with absolute positioning and z-index.