How to get a fixed header to overlay a PHP generated table?

Question

I am currently developing a blog for private use and have come to a point where the core blog works, spare one aesthetic issue which makes it look untidy.

There are two main parts to the homepage: A fixed header with a title and menu child elements inside. A PHP generated table which displays posts from an sql database.

The problem is that when scrolling down the page the header is meant to overlap the table and stay on top to keep it tidy, although I have been unable to get it to do this.

Here is what's written at the minute, can you let me know what you think and a possible solution to my problem?

PHP to display sql results in a table:

    <div id="cwrapper" style="margin:0px auto; margin-top:125px; margin-bottom:25px; width:600px; height:auto; border-top:1px solid #1E1E1E; border-bottom:1px solid #1E1E1E; z-index:-1;">
<?php
    $con = mysqli_connect("localhost","root","","db_posts");
    // Check connection
    if (mysqli_connect_errno()){
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $result = mysqli_query($con,"SELECT * FROM tb_posts ORDER BY id DESC LIMIT 3");



    echo "<table cellpadding='0' cellspacing='0' border='0' id='posttable' style='z-index:-1;'>"; 
    while($row = mysqli_fetch_array($result)){
        echo "<tr><td class='postcell' style='z-index-1;'>" . $row['post'] . "</td></tr>";
    }         
    echo "</table>";

    mysqli_close($con);
?>
</div>

Fixed Header:

    <div id="header">
    <div id="styletext">
        <h1 id="headtext">
            TheNotsoGentleman
            <a href="newpost.php" style="text-decoration:none; color:#000; margin-left:-15px;">.</a>
        </h1>
    </div>
    <div id="menu" style="position:fixed; top:25px; right:20px;">
        <ul>
            <li class="menuitem"><a href="index.php" class="menutext">Blog</a></li>
            <li class="menuitem"><a href="info.php" class="menutext">Info</a></li>
            <li class="menuitem"><a href="downloads.php" class="menutext">Downloads</a></li>
        </ul>
    </div>
</div>

Styling:

#header{
    position:fixed;
    left:0px;
    top:0px;
    height:75px;
    width:100%;
    background-image:url(../assets/pictures/trinet_background.png);
    background-repeat:repeat;
    border-bottom:1px outset #666;
    box-shadow: 0px 7px 8px #888888;
}
#styletext{
    position:fixed;
    top:5px;
    left:10px;
    width:auto;
    height:auto;
    min-height:30px;
}
#headtext{
    font-family:official;
    font-size:42px;
    font-style:bold;
    font-weight:normal;
    text-align:center;
}
#posttable{
  width:600px;
  height:auto;
  margin-top:10px;
  margin-bottom:10px;
  z-index:-1;
}
.postcell{
  width:600px;
  height:auto;
  padding-bottom:20px;
  padding-top:20px;
  padding-left:5px;
  padding-right5px;
  border-bottom:1px dashed #333;
  opacity:0.5;
  -webkit-transition:linear 0.2s;
  -moz-transition:linear 0.2s;
  -o-transition:linear 0.2s;
  transition:linear 0.2s;
  z-index:-1;
}
.postcell:hover{
  opacity:1;
  z-index:-1;
}
#newpost{
  position:fixed;
  top:100px;
  left:100px;
  height:500px;
  width:500px;
  background-color:#FFF;
  border:1px solid #000;
  visibility:visible;
  z-index:-1;
}
.menuitem{
  text-decoration:none;
  list-style:none;
  color:#000;
  display:inline-block;
  margin-right:20px;
}
.menutext{
  text-decoration:none;
  color:#999;
  font-size:24px;
  font-family:monospace;
  -webkit-transition:linear 0.6s;
  -moz-transition:linear 0.6s;
  -o-transition:linear 0.6s;
  transition:linear 0.6s;
}
.menutext:hover{
  color:#000;
}

Thanks in advance for any help/ advice.

possible duplicate of [HTML table with fixed headers?](http://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — DevlshOne, Sep 09 '13 at 21:55

George Yates · Accepted Answer · 2013-09-09T22:08:19.030

Add a >1 z-index to the #header element to pop it above the table. So your header CSS becomes:

#header{
    position:fixed;
    left:0px;
    top:0px;
    height:75px;
    width:100%;
    background-image:url(../assets/pictures/trinet_background.png);
    background-repeat:repeat;
    border-bottom:1px outset #666;
    box-shadow: 0px 7px 8px #888888;
    z-index: 5;
}

The negative z-index on your #posttable will not work as it's statically positioned. z-index only applies to "positioned" elements (elements with position: relative, absolute, or fixed). Alternatively, you could add position: relative to the #posttable element to make the negative z-index have an impact, but since the header is already positioned, it's easier to just add it there and remove the negative value from #posttable.

How to get a fixed header to overlay a PHP generated table?

1 Answers1