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?
It moves table down because there is no much space, try to decrease/increase width of certain elements so that it finds some space and does not push the table down. Also you may want to use absolute positioning to position the div at exactly the place you want, for example:
<style>
#div_id
{
position:absolute;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
If you want to appear it over something, you also need to give it z-index, so it might look like this:
<style>
#div_id
{
position:absolute;
z-index:999;
top:100px; /* set top value */
left:100px; /* set left value */
width:100px; /* set width value */
}
</style>
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?
Use the display property in CSS:
<body>
<div id="invisible" style="display:none;">Invisible DIV</div>
<div>Another DIV
<button onclick="document.getElementById('invisible').style.display='block'">
Button
</button>
</div>
</body>
When the the display of the first div is set back to block it will appear and shift the second div down.
Below is the sample for you, you can check http://www.wickham43.supanet.com/tutorial/opacity.html link for detailed settings :
<html> <body> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/> HELLO DEMO TEXT <BR/>
<div style="top:20;position:absolute;background:#999999;filter:alpha(opacity=30);-moz-opacity:30%;" > FIRST DIV TEXT<BR/> FIRST DIV TEXT<BR/> FIRST DIV TEXT<BR/>
</div>
<div style="top:85;position:absolute;background-color: #000000;filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;"> SECOND DIV <BR/> SECOND DIV <BR/> SECOND DIV <BR/> </div> </body> </html>
z-index only works on absolute or relatively positioned elements. I would use an outer div set to position relative. Set the div on top to position absolute to remove it from the flow of the document.
CSS
.wrapper {position:relative;width:500px;}
.front {border:3px solid #c00;background-color:#fff;width:300px;position:absolute;z-index:10;top:30px;left:50px;}
.behind {background-color:#ccc;}
Code
<div class="wrapper">
<p class="front">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<div class="behind">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<table>
<thead>
<tr>
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
<th>ddd</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
</tr>
</tbody>
</table>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</div>
make these changes in your div's style
b> z-index:100; //some higher value makes sure that this element is above all
a> position:fixed; // this makes sure that even if scrolling is done,
div lies on top and always visible