JS/CSS Issue : my element didn't fully overlapped, when using z-index it stopped the javascript

Question

i created a web-based forum, i want to put the banner in sidebar and header menu. I want that sidebar banner and header didn't move down when i scroll down the web. I try using javascript, it works but some elements overlapping the other.

THE BAD NEWS IS: I EVEN CAN PUT THE CODE IN HERE

this is my site http://forum.wirada.net/

if i add z-index in javascript code, it didn't want to stay when i scroll down
Please...please... anyone can help me? sorry for my bad english and question...

Answer 1

If you change the z-index of div id="scrolling-content" then the text won't overlap.

<div id="scrolling-content" style="position: fixed; top: 0px; width: 100%; z-index: 100;">

I noticed you have used table structure quite heavily (3 nested tables) for creating the web layout. Nowadays layout structure is done using divs. Div layouts are much easier to handle.