How to make a
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?

[This video](https://www.youtube.com/watch?v=l55hSbBUdmQ) is extremely helpful to understand how it works. — J0ANMM, Jan 11 '17 at 15:22

score 39 · Accepted Answer · edited May 23 '17 at 12:02

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?

Thought I would add that in javascript you can access this using `.style.zIndex` — Lucas, Oct 31 '12 at 19:07

score 15 · Answer 2 · edited Nov 27 '18 at 11:19

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.

.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;}

<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>

what's the relative position on the outer element do? – Geoffrey Wiseman Oct 18 '12 at 04:28 — Geoffrey Wiseman, Oct 18 '12 at 04:28

Sarfraz · Answer 3 · 2010-02-23T17:23:21.137

5

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>

edited Feb 23 '10 at 17:23

answered Feb 23 '10 at 04:03

Sarfraz

377,238
77
533
578

You can also add a z index to make sure it appears in front of other things via `z-index: 200;` – tzenes Feb 23 '10 at 04:06
I want it to appear OVER the text/tables not move them or be displayed in between them. – privateace Feb 23 '10 at 04:09
@tzenes: answer has been updated if he wanted to make the div appear over other elements. Thanks – Sarfraz Feb 23 '10 at 05:55
@privateace: please check my answer again :) – Sarfraz Feb 23 '10 at 05:55

score 1 · Answer 4 · answered Feb 10 '15 at 07:58

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):

<div style="position:relative;width:300px;height:300px;background-color:#eef">
    <div style="position:absolute;bottom:0;right:0;width:100px;height:100px;background-color:#fee">
        I'm over you!
    </div>
    Your main text
</div>

See it here: http://jsfiddle.net/bptvt5kb/

score 0 · Answer 5 · edited Sep 18 '18 at 10:54

0

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

edited Sep 18 '18 at 10:54

Liam

27,717
28
128
190

answered Feb 23 '10 at 12:53

Praveen Prasad

31,561
18
73
106

J Bruno · Answer 6 · 2010-02-23T04:35:08.547

-3

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.

edited Feb 23 '10 at 04:35

answered Feb 23 '10 at 04:21

J Bruno

131
4

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

6 Answers6

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