SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Baltimore, MD
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question about using negative values for "top" to layer items.

    Hi all,

    I have a quick about positioning I was hoping someone might be able to help me out with. I am attempting to create a layout which includes one section with two layers, one on top of the other.

    To get the layers in the right place what I'm doing is placing the divs one after another and then using a negative value for the top property to move the later one up.

    The issue I'm running into, however, is that this results in extra space generated below the layers such that the same amount of space is used as if it were never moved up.

    So far I've checked Firefox, Safari, and Opera and all are the same.
    Can anyone explain what is causing the white-space? It is not that hard to work-around, but it would be nice to be able to eliminate that problem at the root of the cause.

    Here is a brief demo of what I am thinking:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    	<title>CSS > Layer Experiment</title>
    	<style type='text/css'>
    	<!--
    
    		#outsideBox {
    			border:1px solid black;
    			color:white;
    		}
    		#box1 {
    			background-color:blue;
    			width:500px;
    			height:100px;
    			display:block;
    			margin-left:auto;
    			margin-right:auto;
    		}
    		#box2 {
    			display:block;
    			margin-left:auto;
    			margin-right:auto;
    			position:relative;
    			width:500px;
    			height:500px;
    			background-color: gray;
    		}
    		#box3 {
    			background-color:green;
    			width:500px;
    			height:500px;
    			display:block;
    			margin-left:auto;
    			margin-right:auto;
    			position:relative;
    			top:-600px;
    		}
    		#box4 {
    			background-color:red;
    			width:500px;
    			height:100px;
    			display:block;
    			margin-left:auto;
    			margin-right:auto;
    		}
    	-->
    	</style>
    </head>
    <body>
    <h1>CSS Layers</h1>
                                              
    <div id="outsideBox">
    	<div id="box1">Header</div>
    	<div id="box2">Viewport</div>
    	<div id="box4">Footer</div>
    	<div id="box3">UI Layer (sits on top of Viewport layer...)</div>
    </div>
    
    </body>
    </html>
    Thanks,
    Keith

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Offsetting the position using relative positoning and the top property only offsets the display of the element - it still actually occupies the original position, just displayed elsewhere. Why not put box3 inside box2?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Baltimore, MD
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Centauri,

    Thanks for the response. The problem with placing box3 inside box2 is that they begin to interact. Adding content in box2 would push box3 down (supposing that box3 is placed at the bottom of the div).

    Ideally what I would like is two layers, one on top of the other, that do not directly interact with one another and can be maintained separate from one another.

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Would not box3 hide the content in box2 if it is over top?

    If box2 is set position:relative, then box3 can be inside it positioned absolute with top and left at zero and height and width at 100&#37; (provided box2 has a height assigned) - box3 would then cover box2 and be the same size.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Baltimore, MD
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect!

    It's been a while since I've dirtied my hands with style and a lot has changed since then (and I've almost certainly forgotten a bit too).

    Thanks for the help Centauri


    Take care,
    Keith


Bookmarks

Posting Permissions

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