SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    absolute position in relation

    Say I have a 'container' div, 760px wide and centered on the page, how can I use absolute position on an item (image, div, whatever) that interprets the position in relation to the container div? Like, if I say
    Code:
    #item {
      position: absolute;
      top: 50px;
      left: 25px; }
    Make it 50px from the top and 25px from the left in relation to the container div, not from the actual page top and left...Treat the container div as the edges of the page.

    Thanks!
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  2. #2
    SitePoint Enthusiast Mikeymoo's Avatar
    Join Date
    Jul 2003
    Location
    St. Albans, Uk
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds like a relative position to me...

    Have you thought of using a margin?

    Surely the image <div> would be a container within 760px <div>, call it the content.

    If the content div is:-
    Code:
    .content {width: 760;}
    adding:
    Code:
    #item {
      margin-left: 25px;
      margin-top: 50px;
      }
    would place the item in the position, relative to the content.

    Test doc:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title>Position Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style>
    /* ** Code Originally from Paul O'B - 3 Col Example ** */
    html, body {
    	height:100%
    	}
    
    body 	{
    	padding:0;
    	margin:0;
    	text-align:center;
    	min-width:760px;
    	background-color: #F2E3EE;
    	background-image:  url(./centredbg.jpg);
    	background-repeat: repeat-y;
    	background-position: center center;
    	color: #000000;
    	}
    
    #outer	{
    	height:100%;
    	min-height:100%;
    	width:758px;
    	border-left: 0px solid #000;
    	border-right: 0px solid #000;
    	color: #000000;
    	text-align:left;
    	margin:auto;
    	margin-bottom:-52px;/* make room for footer */
    	position:relative;
    	border: 1px black solid;
    	}
    
    html>body #outer{
    	height:auto;
    	} /*for mozilla as IE treats height as min-height anyway*/
    
    #innerwrap {
    	/* enables content first */
    	float:left;
    	width:626px;
    	border: 1px blue solid;
    	}
    
    #left 	{
    	position:relative;/*ie needs this to show float */
    	width:120px;
    	float:left;
    	padding-top:72px;/*needed to make room for header*/
    	padding-bottom:32px;/* needed to make room for footer */
    	background-color: transparent;
    	border: 1px red solid;
    	}
    
    #left p	{
    	padding-left:3px;
    	padding-right:2px
    	}
    
    #centrecontent {
    	width:496px;
    	float:right;
    	padding-top:72px;
    	padding-bottom:32px;/* needed to make room for footer */
    	background-color: transparent;
    	border: 1px orange solid;
    	}
    
    #centrecontent p {
    	padding-left:3px
    	}
    
    #test	{
    	margin-left: 25px;
    	margin-top: 25px;
    	width: 95px;
    	border: 1px green solid;
    	}
    </style>
    
    </head>
    
    <body>
    
    <div id="outer">
      <div id="innerwrap">
        <div id="centrecontent">
    		<p>Center Content Center Content Center Content Center Content Center Content
    		Center Content Center Content Center Content Center Content Center Content Center Content
    		Center Content Center Content Center Content Center Content </p>
        </div>
    
        <div id="test">
        	Test Container 50px from top of inner wrap and 25px to the left.
        </div>
    
        <div id="left">
        <p>Left Content</p>
        </div>
    
      </div>
    </div>
    
    </body>
    </html>
    Mikel
    Good decisions come from experience.
    Experience comes from making bad decisions.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    To place an element in relation to another element using absolute postioning the parent element needs to have a property defined for position. If there is no ancerstor with a property for position defined then the parent is the html element (i.e. the body outside all margins).

    What this simply means that to gain a stacking context for nested elements the parent has to be either position:absolute or position:relative.

    If you use position:relative on the parent without co-osdinates then the parent still stays in the flow and is not changed anyway. This then means that any absolutely positioned children will take their starting co-ordinates as the top left of your container. If the parent is in the flow and moves about (e.g. when centred) then the absolutely placed child will always stay in the correct position in relation to its parent and not the viewport.

    Code:
    #container {
    width:760px;
    margin:auto;
    position:relative;
    }
    #item { position: absolute; top: 50px; left: 25px; }
    Code:
    <div id="container">
    <div id="item">Positioned stuff</div>
    </div>
    of course as mickeymoo said above you can move items around using their margins and still keep them in the flow of the document. Absolute positioning removes an element from the flow so static content will not know its there.

    Hope that makes some sense.

    Paul

  4. #4
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks!
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches


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
  •