Fixed Div - content is scrolling behing

Question

I have this table at the top of my page...

<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed; z-index:99999;">
  <tr>
    <td><a href="index.php"><img src="logo.png" width="282" height="41" /></a></td>
    <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
  </tr>
</table>

it always stays at the top of the page however when scrolling down, all the content on the page goes behind the table and you can see it behind

does anyone know what i can do to stop this from happening?

EDIT: This is my full code...

<style type="text/css">
body,html {
    height:100%;
}
#top-bar {
    width:100%;
    padding:10px 10px 80px 10px;
    margin:0 0 100px 0;
    border-bottom:solid 1px #000000;
    top:0;
    left:0;
}
#left-bar {
    width:170px;
    display:inline;
    float:left;
}
#right-bar {
    width:80%;
    display:inline;
    float:right;
}
</style>
</head>

<body>
<div id="top-bar">
<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed">
  <tr>
    <td><a href="index.php"><img src="logo.png" width="282" height="41" /></a></td>
    <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
  </tr>
</table>
</div>

<div id="left-bar"><iframe src="header.php" width="180px" height="100%" frameborder="0" scrolling="no"></iframe></div>

<div id="right-bar">
<iframe name="rightiframe" src="dash.php" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
</div>

</body>

look at the style you are using style="position:fixed; z-index:99999;" — ebram khalil, Mar 14 '13 at 20:12
possible duplicate of [z-index not working with fixed positioning](http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning) — j08691, Mar 14 '13 at 20:14

user2019515 · Answer 1 · 2013-03-14T20:21:18.843

1

You're most probably looking for this:

<table width="95%" border="0" cellspacing="0" cellpadding="0" style="position:fixed;z-index:999;top:0;left:0;background-color:#fff">
  <tr>
    <td><a href="index.php"><img src="logo.png" width="282" height="41" /></a></td>
    <td align="right">Hello <?php echo $_SESSION["forename"]; ?> | <a href="logout.php">Logout</a></td>
  </tr>
</table>

The background-color makes sure you can't see any content that is behind the table.

JsFiddle: http://jsfiddle.net/CRHxk/

edited Mar 14 '13 at 20:21

answered Mar 14 '13 at 20:16

user2019515

4,495
1
29
42

i want the table to stay at the top of the page and not move when scrolling – Mar 14 '13 at 20:16
but thats still going to push the table where you cant see it when scrolling? – Mar 14 '13 at 20:18

Fixed Div - content is scrolling behing

1 Answers1