473,320 Members | 1,857 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How to place a DIV on top of another DIV ?

296 100+
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
9 31673
Ansuiya
40
Try to set position as absolute
Jan 29 '07 #2
drhowarddrfine
7,435 Expert 4TB
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
pankajit09
296 100+
I want to make the second DIV draggable using a mouse.

How to do that ?
Jan 30 '07 #4
drhowarddrfine
7,435 Expert 4TB
Then you are no longer talking HTML or CSS and I'll refer you to the javascript board.
Jan 30 '07 #5
pankajit09
296 100+
I am using a JS file to achieve the dragging.

I have put another question in the Javascript section.
Jan 30 '07 #6
ruwang
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
ruwang
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
7,435 Expert 4TB
ruwang,
This thread is over a year old and unrelated to html/css so I'm closing it.
Feb 11 '08 #9
Frinavale
9,735 Expert Mod 8TB
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

18
by: John Dalberg | last post by:
Hello I have a login form on a page that should post the data to a non Windows server and upon successful authentication, the browser needs to show the secodn url. I did the form post, got...
51
by: nospam | last post by:
THIS IS the DOTNETJUNKIES MESSAGE ------------------------- We're Sorry As many of you know we have recently launched SqlJunkies.com. We have overhauled our runtime and will be using it on...
18
by: John Black | last post by:
Hi, I am not familiar with for_each very well, suppoase I have a vector<pair<unsigned int, unsigned int> > vec1 and the contents are {<0x00000000, 0x000000FF>, <0x10000000, 0x2FFFFFFF>} what...
6
by: dixie | last post by:
I am using the Docmd.TransferDatabase to transfer part of a table into another smaller database. The source comes from a select query that transfers the part of the table that I need. The...
5
by: Paul Mendez | last post by:
I am creating a form with a tab control containing 10 tabs. and what I want to do is on only on of the tabs, I want a sub section of tabs. So what it ends up being is one main tab control with...
188
by: christopher diggins | last post by:
I have posted a C# critique at http://www.heron-language.com/c-sharp-critique.html. To summarize I bring up the following issues : - unsafe code - attributes - garbage collection -...
3
by: qwerty | last post by:
I´m new to ASP.Net. My workmate has some experience with it. He claimed that in ASP.Net working with frames is much simpler than it was ASP. I asked explanation but he couldn't give me such. (a...
1
by: Sridhar | last post by:
Hi, I have created a webpage. In that webpage I am loading a user control into a place holder. The user control has a link button in it. when I click on that I need to able to load another user...
2
by: greenMark | last post by:
Hi All, I'm relatively new to ASP.NET and Visual Web Developer 2008. I'm using a Master page with one content place holder. There is a Cascading Style Sheet file which is being refered by the...
7
by: Bsorensen | last post by:
I have created a table: TblDVAssociate with 2 fields: Field 1 Name Field 2 Pin <--This is also the Primay Key as I do not want duplicate Pin Numbers I have another table: TblMaster with 6...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.