One Table and several divs position

Question

Have table and several div elements. Table is time grid and divs are events that may take every position relatively table from top to bottom, dependently on time.

See screenshot:

So to make margin-top for div correct I specify it as negative, because these divs are positioned relatively to the table.

But in some cases they positioned relatively each other and murkup is non-correct.

So how to do these divs positions to be relative to start point of screen and table to be as background, e.g. to specify “very” hegative z-index.

So, the question is how to do that table doesn’t affect position of divs.

Note: absolute position for divs is not acceptable, because while scrolling the table is scrolled and div is frozen.

Simplified example of HTML (in order) table:

<table cellspacing="0" cellpadding="0" style="margin: 0pt; padding: 0pt; width: 100%;">
</table>

div:

<div style="height: 118px; margin-left: 38px; margin-top: -94px; width: 48%;"></div>

Answer 1

You can absolutely position the div relatively.

What this involves is setting position:relative on the table, you can then set position:absolute on the contained divs, these will then scroll with table, and is a more reliable way of setting the divs location and will work better across browsers.

EDIT: Once you have set position: absolute, you want to use top: and left: not margin-top: and margin-left: as you are not using these for their purpose.