How to make a <div> appear in front of regular text/tables
css, xhtml
Solution
You can use the stacking index of the div to make it appear on top of anything else. Make it a larger value that other elements and it well be on top of others.
use `z-index` property. See Specifying the stack level: the 'z-index' property and
Elaborate description of Stacking Contexts
Something like
#divOnTop { z-index: 1000; }
<div id="divOnTop">I am on top</div>
What you have to look out for will be IE6. In IE 6 some elements like `<select>` will be placed on top of an element with z-index value higher than the `<select>`. You can have a workaround for this by placing an `<iframe>` behind the div.
See this Internet Explorer z-index bug?
Problem
I have been trying to make a DIV box appear in front of the text/tables that I have on a webpage. The DIV is made visible via a button press; but when visible it automatically moves the text/table downward and includes the DIV content above it. Can anyone help?