How to make a div appear in front of regular text tables

Question

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

User · Accepted Answer

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?

User · Answer

make these changes in your div s style   z-index 100   some higher value makes sure that this element is above all position fixed    this makes sure that even if scrolling is done     div lies on top and always visible

User · Answer

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    x000D   x000D   wrapper  position relative width 500px   x000D   x000D   front   x000D    border 3px solid  c00  x000D    background-color  fff  x000D    width 300px  x000D    position absolute  x000D    z-index 10  x000D    top 30px  x000D    left 50px  x000D     x000D     x000D   behind  background-color  ccc   x000D   lt div class  wrapper  gt  x000D       lt p class  front  gt 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  lt  p gt  x000D       lt div class  behind  gt  x000D           lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  lt  p gt  x000D           lt table gt  x000D               lt thead gt  x000D                   lt tr gt  x000D                       lt th gt aaa lt  th gt  x000D                       lt th gt bbb lt  th gt  x000D                       lt th gt ccc lt  th gt  x000D                       lt th gt ddd lt  th gt  x000D                   lt  tr gt  x000D               lt  thead gt  x000D               lt tbody gt  x000D                   lt tr gt  x000D                       lt td gt 111 lt  td gt  x000D                       lt td gt 222 lt  td gt  x000D                       lt td gt 333 lt  td gt  x000D                       lt td gt 444 lt  td gt  x000D                   lt  tr gt  x000D               lt  tbody gt  x000D           lt  table gt  x000D           lt p gt 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  lt  p gt  x000D       lt  div gt   x000D   lt  div gt   x000D   x000D   x000D

User · Answer

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    lt style gt    div id       position absolute     top 100px     set top value       left 100px     set left value       width 100px      set width value        lt  style gt    If you want to appear it over something  you also need to give it z-index  so it might look like this    lt style gt    div id       position absolute     z-index 999     top 100px     set top value       left 100px     set left value       width 100px      set width value        lt  style gt

User · Answer

Use the display property in CSS    lt body gt        lt div id  invisible  style  display none   gt Invisible DIV lt  div gt         lt div gt Another DIV           lt button onclick  document getElementById  invisible   style display  block   gt              Button          lt  button gt         lt  div gt     lt  body gt    When the the display of the first div is set back to block it will appear and shift the second div down

User · Answer

You may add a div with position absolute within a table div with position relative  For example  if you want your overlay div to be shown at the bottom right of the main text div  width and height can be removed     lt div style  position relative width 300px height 300px background-color  eef  gt       lt div style  position absolute bottom 0 right 0 width 100px height 100px background-color  fee  gt          I m over you       lt  div gt      Your main text  lt  div gt    See it here  http   jsfiddle net bptvt5kb

[css] How to make a <div> appear in front of regular text/tables

Examples related to css

Examples related to xhtml