SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image not working absolute or relative

    I'm trying to have a small image appear overlapping a few areas. I can do this with absolute, but it doesn't move with the page(which is weird, because the div is within another div, I thought absoute was dependant on the parent container). It looks good relative, but then it pushes everything else down. I tried doing different z-index settings, but still the pushing.

    SO, can I have something relatively positioned to overlap areas without affecting flow? Or, can I absolutely position something and still have it move with window re-sizes?

    Getting desparate, any help is greatly appreciated!

    here is a portion of the style sheets, and the first bit of code for the page:
    Code:
    html, body {margin: 10 0; padding: 0; height: 100%; text-align: center; 
    min-width: 780px; 
    }
    #bgcontain { 
    background: #FFF; 
    width: 780px; 
    margin: 0 auto; 
    text-align: left; 
    }
    #header {
    	background:#fff;
    	width: 780px;
    } 
    #navbar {
    	float: left;
    	height: 24px;
    	width: 780px;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-top-color: #e3d8bf;
    	z-index: 2;
    }
    #crumb {
    	width: 780px;
    	z-index: -1;
    } 
    #crumb p, #crumb a:link, #crumb a:visited {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	line-height: 24px;
    	color: #333333;
    	font-weight: normal;
    	text-align: left;
    	margin-left: 140px;
    }
    #contact {
    	background-image: url(images/toprtbar.gif);
    	width: 161px;
    	height: 110px;
    	background-repeat: repeat-x;
    	z-index: -1;
    }
    #gearclock {
    	position: relative;
    	left: 710px;
    	top: 80px;
    	z-index: 1;
    }
    Code:
    <body> 
    <div id="bgcontain">
    <div id="header">
         <div><img src="images/311904.gif" alt="colorbar" width="100%" height="8" /></div>
        <div id="home" style="float:left"><img src="images/InfoTlogo.gif" alt="logo" width="230" height="80" border="0" /><br>
          <img src="images/linetp.gif" width="132" height="30" /><img src="images/ad832f_30h.gif" width="98" height="30" /></div>
    	   <div style="float:left"><img src="images/topbar/topbar_point.jpg" alt="top photo" width="388" height="110" border="0" /></div>
        <div style="float:left" id="contact"><br />
          <p><a href="#">contact</a><br />
            <a href="#">partner login</a> <br style="clear:both">
          </p>
        </div>
        <div id="navbar"> 
    	 	 <div style="float:left"><img src="images/linebtm.gif" width="132" height="24" /></div>
        	  <div class="nav" style="float:left"><a href="#">products</a></div>
              <div class="nav" style="float:left"><a href="#">services</a></div>
              <div class="nav" style="float:left"><a href="#">partners</a></div>
              <div class="nav" style="float:left"><a href="#">news</a></div>
              <div class="nav" style="float:left""><a href="#">about</a></div>
        </div>
    <br style="clear:both"> </div>     <div id="gearclock"><img src="images/smclock1.gif" /></div>
    <div id="crumb">
        <p>crumb area</p>
      </div></div></body>

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Relative positioning will move an element relative to the position it would normally occupy. The rest of the content will be flowed as if the relatively positioned element was still in its original position. In your example, you're moving the #gearclock element 710px to the right and 80px down, but the remaining content will be laid out as if the clock were not positioned. (There will be a 'hole' where the clock used to be.)

    With position:absolute, the element is completely removed from the document flow, which means it doesn't affect any other elements. The position is relative to its containing block, which is not necessarily the same as its parent block. The containing block is the nearest positioned ancestor (i.e. an ancestor with position set to relative, absolute or fixed). If there is no positioned ancestor, the containing block is the so-called initial containing block, which is usually the root element (<html>).

    If you want to position an element with respect to another element, make sure that they have a common ancestor and set position:relative (without displacing it) for the ancestor. Then you can use position:absolute for the clock to put it above something else.

    The z-index property works within a positioning context, i.e. it controls the stacking order of positioned elements with a common containing block. If two elements don't have the same containing block, you have to set the z-index for the respective containing blocks, rather than for the positioned elements themselves.

    Clear, huh? It's quite easy, once you decipher W3C's weird terminology:

    position:static is not static, it depends on the document flow.
    position:relative is relative to itself.
    position:absolute is not absolute, but relative to a containing block.
    position:fixed is absolute, relative to the viewport.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh my, I'm saved. Thanks for the very clear explanation, especially about having a positioned anchor. It works beautifully now, in both ie and ff (well, a few tweaks yet for spacing).

    Should more divs be positioned, in general? This site has a page div, then header, 3 columns, and footer as "master" divs. I added position: relative to the page div, but no others. Is there a rule of thumb about this, or is it only as-needed?

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only as needed. If you set position:relative to too many elements, you make things harder for yourself. If you want to position something relative to something else, they 'need to' have a common, positioned ancestor (at least that makes it a lot easier). If they don't have the same parent element, and their respective parents are unnecessarily positioned, you lose the advantage of having a common, positioned ancestor acting as their containing block.

    In other words, don't add position:relative unless you need it.
    Birnam wood is come to Dunsinane


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
  •