By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,880 Members | 1,817 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,880 IT Pros & Developers. It's quick & easy.

How to place a DIV on top of another DIV ?

100+
P: 296
Hello ,

I have two DIVs .

The second DIV appears when a link present in the first DIV is clicked .

How to place the second DIV on top of the first DIV when a link present in the first DIV is clicked ?
Jan 29 '07 #1
Share this Question
Share on Google+
9 Replies


P: 40
Try to set position as absolute
Jan 29 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
Look up the css attributes 'display:none' and 'visibility'.

I'm swapping computers and operating systems around so I'm not sure when I'll have all my tools available.
Jan 29 '07 #3

100+
P: 296
I want to make the second DIV draggable using a mouse.

How to do that ?
Jan 30 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Then you are no longer talking HTML or CSS and I'll refer you to the javascript board.
Jan 30 '07 #5

100+
P: 296
I am using a JS file to achieve the dragging.

I have put another question in the Javascript section.
Jan 30 '07 #6

P: 2
I think the following example html will demonstrate what you want. Additionally it masks the base layer while front layer is appearing.

####### HTML Begins ###########
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
  4.         <script type="text/javascript">
  5.             function showFrontLayer() {
  6.                 document.getElementById('bg_mask').style.visibility='visible';
  7.                 document.getElementById('frontlayer').style.visibility='visible';
  8.             }
  9.             function hideFrontLayer() {
  10.                 document.getElementById('bg_mask').style.visibility='hidden';
  11.                 document.getElementById('frontlayer').style.visibility='hidden';
  12.             }
  13.         </script>
  14.         <style type="text/css">
  15.  
  16.         #bg_mask {
  17.             position: absolute;
  18.             top: 0;
  19.             right: 0;
  20.             bottom: 0;
  21.             left: 0;
  22.             margin: auto;
  23.             margin-top: 0px;
  24.             width: 981px;
  25.             height: 610px;
  26.             background : url("img_dot_white.jpg") center;
  27.             z-index: 0;
  28.             visibility: hidden;
  29.         } 
  30.  
  31.         #frontlayer {
  32.             position: absolute;
  33.             top: 0;
  34.             right: 0;
  35.             bottom: 0;
  36.             left: 0;
  37.             margin: 70px 140px 175px 140px;
  38.             padding : 30px;
  39.             width: 700px;
  40.             height: 400px;
  41.             background-color: orange;
  42.             visibility: hidden;
  43.             border: 1px solid black;
  44.             z-index: 1;
  45.         } 
  46.  
  47.  
  48.         </style>
  49.     </head>
  50. <body>
  51. <form action="test.html">
  52.     <div id="baselayer">
  53.  
  54.         <input type="text" value="testing text"/>
  55.         <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>
  56.  
  57.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  58.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  59.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  60.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  61.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  62.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  63.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  64.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  65.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  66.             <div id="bg_mask">
  67.             <div id="frontlayer"><br/><br/>
  68.                 Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
  69.                 Use position: absolute to get the one div on top of another div.<br/><br/><br/>
  70.                 The bg_mask div is between baselayer and front layer.<br/><br/><br/>
  71.                 In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
  72.                 <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
  73.             </div>
  74.         </div>
  75.     </div>
  76. </form>
  77. </body>
  78. </html>
  79.  
  80.  
####### HTML Ends ###########


Hello ,

I have two DIVs .

The second DIV appears when a link present in the first DIV is clicked .

How to place the second DIV on top of the first DIV when a link present in the first DIV is clicked ?
Feb 11 '08 #7

P: 2
Oh I forgot to mention. The image img_dot_white.jpg is just a one pixel image that is overlapped by the front layer. This is for IE transparency issue and any small image can be used for that.
Feb 11 '08 #8

drhowarddrfine
Expert 5K+
P: 7,435
ruwang,
This thread is over a year old and unrelated to html/css so I'm closing it.
Feb 11 '08 #9

Frinavale
Expert Mod 5K+
P: 9,731
I think the following example html will demonstrate what you want. Additionally it masks the base layer while front layer is appearing.
...
In the code that you've posted as a demonstration you have left out the use of the "position:absolute"; therefore, the <div> does not appear "on top of" the other div.
The following code corrects the problem based on your example:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
  4.         <script type="text/javascript">
  5.             function showFrontLayer() {
  6.                 document.getElementById('bg_mask').style.visibility='visible';
  7.                 document.getElementById('frontlayer').style.visibility='visible';
  8.             }
  9.             function hideFrontLayer() {
  10.                 document.getElementById('bg_mask').style.visibility='hidden';
  11.                 document.getElementById('frontlayer').style.visibility='hidden';
  12.             }
  13.         </script>
  14.         <style type="text/css">
  15.  
  16.         bg_mask {
  17.             position: absolute;
  18.             top: 0;
  19.             right: 0;
  20.             bottom: 0;
  21.             left: 0;
  22.             margin: auto;
  23.             margin-top: 0px;
  24.             width: 981px;
  25.             height: 610px;
  26.             background: url("img_dot_white.jpg") center;
  27.             z-index: 0;
  28.             visibility: hidden;
  29.         }
  30.  
  31.         frontlayer {
  32.             position: absolute;
  33.  
  34.            top: 0;
  35.             right: 0;
  36.             bottom: 0;
  37.             left: 0;
  38.             margin: 70px 140px 175px 140px;
  39.             padding : 30px;
  40.             width: 700px;
  41.             height: 400px;
  42.             background-color: orange;
  43.             visibility: hidden;
  44.             border: 1px solid black;
  45.             z-index: 1;
  46.         }
  47.  
  48.  
  49.         </style>
  50.     </head>
  51. <body>
  52. <form action="test.html">
  53.     <div id="baselayer">
  54.  
  55.         <input type="text" value="testing text"/>
  56.         <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>
  57.  
  58.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  59.  
  60.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  61.  
  62.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  63.  
  64.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  65.  
  66.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  67.  
  68.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  69.  
  70.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  71.  
  72.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  73.  
  74.         Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
  75.             <div id="bg_mask" style="position:absolute;top:0;left:0;visibility:hidden;">
  76.             <div id="frontlayer" style="background-color:white;"><br/><br/>
  77.                 Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
  78.                 Use position: absolute to get the one div on top of another div.<br/><br/><br/>
  79.                 The bg_mask div is between baselayer and front layer.<br/><br/><br/>
  80.                 In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
  81.                 <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
  82.             </div>
  83.         </div>
  84.     </div>
  85. </form>
  86. </body>
  87. </html>

Please note that "visibility:hidden" hides the <div>, however it is still there. This means that any buttons are under this <div> may become inaccessible. You should use "display:none" instead in these cases.

-Frinny
Feb 11 '08 #10

This discussion thread is closed

Replies have been disabled for this discussion.