dcsimg
www.webdeveloper.com
Results 1 to 7 of 7

Thread: Layering one <div> on top of another

  1. #1
    Join Date
    Sep 2006
    Posts
    81

    Layering one <div> on top of another

    Hello,

    I have a <div> element on my site which fills the screen. I would like to display another <div> on top of it, which i can turn on and off - is this possible and if so how's it done?


    Many thanks for your attention

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Absolute positioning or make the content of the original div into a background.

  3. #3
    Join Date
    Feb 2008
    Location
    Australia-Gosford
    Posts
    3

    div on top of another div

    This example shows what you want. Additionally it is masking the back layer. In IE background color:transparency doesnt work well. Background image(a one pixel dot) is used to evoid that issue. It is covered by the front div layer

    #######HTML Begins below

    HTML Code:
    <html>
    	<head>
    		<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
    		<script type="text/javascript">
    			function showFrontLayer() {
    				document.getElementById('bg_mask').style.visibility='visible';
    				document.getElementById('frontlayer').style.visibility='visible';
    		    }
    			function hideFrontLayer() {
    				document.getElementById('bg_mask').style.visibility='hidden';
    				document.getElementById('frontlayer').style.visibility='hidden';
    		    }
    		</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_white.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.html">
    	<div id="baselayer">
    	   
    		<input type="text" value="testing text"/>
    		<input type="button" value="Show front layer" onclick="showFrontLayer();"/> 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.jpg(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="hideFrontLayer();"/>
    			</div>
    		</div>
    	</div>
    </form>
    </body>
    </html>
    Last edited by WebJoel; 02-18-2008 at 12:10 PM. Reason: [html] tags for easier reading

  4. #4
    Join Date
    Feb 2008
    Location
    Australia-Gosford
    Posts
    3
    Use any small image instead of img_dot_white.jpg

  5. #5
    Join Date
    Sep 2006
    Posts
    81
    Ruwang thanks for your reply

    I have tried to implement your code with my own, which can be seen here:

    http://www.globexposure.net/index_basic_v3.php

    I would like the 'frontlayer' <div> to appear on top of the 'display_map' <div> with the marker details when a marker is clicked...this is clearly not happening atm and perhaps it has something to do with the bg_mask - the need for which i don't properly understand.

    My website is designed for Firefox and i don't intend on using IE. Firebug does not register any errors so I'm not sure whats wrong....can you help?


    Many thanks
    Last edited by daniish; 02-11-2008 at 03:34 PM.

  6. #6
    Join Date
    Feb 2008
    Location
    Australia-Gosford
    Posts
    3

    a div on top of another div

    bg_mask is used to disable bottom layer(div) controls(buttons links etc) once the top layer(div) is activated.

    If the top layer is small in size than the bottom layer(div), the controls (buttons and links etc) in the bottom layer(div) are still active. Once the top layer is active, bottom layer controls should be visible but disabled. If there is no requirement like that in your case, just ignore that layer and related javascript cording lines.

    If you have swf's in your layers, this example wont help you.

  7. #7
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    This example shows what you want. Additionally it is masking the back layer. In IE background color:transparency doesnt work well.....
    "background color:transparency;" isn't proper syntax (assuming that this is how you wrote it in the code).
    It is "background-color:transparent;" and it should work. But anyway...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles