How to place a DIV on top of another DIV ?

**Ansuiya** · Jan 29 '07, 09:45 AM

Try to set position as absolute

**drhowarddrfine** · Jan 29 '07, 05:15 PM

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.

**pankajit09** · Jan 30 '07, 04:50 AM

I want to make the second DIV draggable using a mouse.

How to do that ?

**drhowarddrfine** · Jan 30 '07, 06:02 AM

Then you are no longer talking HTML or CSS and I'll refer you to the javascript board.

**pankajit09** · Jan 30 '07, 06:30 AM

I am using a JS file to achieve the dragging.

I have put another question in the Javascript section.

**ruwang** · Feb 11 '08, 06:07 AM

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

####### HTML Begins ###########
[code=html]
<html>
<head>
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
<script type="text/javascript">
function showFrontLayer( ) {
document.getEle mentById('bg_ma sk').style.visi bility='visible ';
document.getEle mentById('front layer').style.v isibility='visi ble';
}
function hideFrontLayer( ) {
document.getEle mentById('bg_ma sk').style.visi bility='hidden' ;
document.getEle mentById('front layer').style.v isibility='hidd en';
}
</script>
<style type="text/css">

#bg_mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_wh ite.jpg") center;
z-index: 0;
visibility: hidden;
}

#frontlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 70px 140px 175px 140px;
padding : 30px;
width: 700px;
height: 400px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}

</style>
</head>
<body>
<form action="test.ht ml">
<div id="baselayer" >

<input type="text" value="testing text"/>
<input type="button" value="Show front layer" onclick="showFr ontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
<div id="bg_mask">
<div id="frontlayer" ><br/><br/>
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
Use position: absolute to get the one div on top of another div.<br/><br/><br/>
The bg_mask div is between baselayer and front layer.<br/><br/><br/>
In bg_mask, img_dot_white.j pg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
<input type="button" value="Hide front layer" onclick="hideFr ontLayer();"/>
</div>
</div>
</div>
</form>
</body>
</html>

[/code]
####### HTML Ends ###########

Originally posted by pankajit09

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 ?

**ruwang** · Feb 11 '08, 06:12 AM

Oh I forgot to mention. The image img_dot_white.j pg 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.

**drhowarddrfine** · Feb 11 '08, 07:03 PM

ruwang,
This thread is over a year old and unrelated to html/css so I'm closing it.

**Frinavale** · Feb 11 '08, 07:07 PM

Originally posted by ruwang

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:absol ute"; therefore, the <div> does not appear "on top of" the other div.
The following code corrects the problem based on your example:
[code=html]
<html>
<head>
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
<script type="text/javascript">
function showFrontLayer( ) {
document.getEle mentById('bg_ma sk').style.visi bility='visible ';
document.getEle mentById('front layer').style.v isibility='visi ble';
}
function hideFrontLayer( ) {
document.getEle mentById('bg_ma sk').style.visi bility='hidden' ;
document.getEle mentById('front layer').style.v isibility='hidd en';
}
</script>
<style type="text/css">

bg_mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background: url("img_dot_wh ite.jpg") center;
z-index: 0;
visibility: hidden;
}

frontlayer {
position: absolute;

top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 70px 140px 175px 140px;
padding : 30px;
width: 700px;
height: 400px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}

</style>
</head>
<body>
<form action="test.ht ml">
<div id="baselayer" >

<input type="text" value="testing text"/>
<input type="button" value="Show front layer" onclick="showFr ontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text

Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
<div id="bg_mask" style="position :absolute;top:0 ;left:0;visibil ity:hidden;">
<div id="frontlayer " style="backgrou nd-color:white;">< br/><br/>
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
Use position: absolute to get the one div on top of another div.<br/><br/><br/>
The bg_mask div is between baselayer and front layer.<br/><br/><br/>
In bg_mask, img_dot_white.j pg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
<input type="button" value="Hide front layer" onclick="hideFr ontLayer();"/>
</div>
</div>
</div>
</form>
</body>
</html>[/code]

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

-Frinny

How to place a DIV on top of another DIV ?

How to place a DIV on top of another DIV ?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment