#1
  1. :(){ :|:&};:
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Germany
    Posts
    297
    Rep Power
    11

    CSS <div> absolute/relative position


    Hi there

    I am trying to position my <div>'s relative to where they usually would be in the table cell that they are in, and there should be multiple <div>'s over each other. Basicly I would use position:absolute usually, but these layers I want to position relative to the parent cell - is there a way to do that?

    thanks for taking your time
    regards >_<

    ws. fgeller.de
    em. felix@fgeller.de
  2. #2
  3. No Profile Picture
    matthewdoucette.com
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2002
    Posts
    635
    Rep Power
    12
    I have not used divs before, but I would like to see your code and maybe this will help me understand how they work.
    Matthew Doucette / Xona.com
  4. #3
  5. :(){ :|:&};:
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    Germany
    Posts
    297
    Rep Power
    11
    Code:
    <td valign="middle" align="center"> 
    								<div style="position:relative; top:32px; left:32px; visibility: visible; z-index:1;"> 
                                    	<img src="01.jpg" width="32" height="32">
    								</div>								 
    								<div style="position:relative; top:32px; left:32px; visibility: visible; z-index:2;"> 
                                    	<img src="02.jpg" width="32" height="32">
    								</div>
    							</td>
    this is the extract - for the cell I was talking about. but the two layern aren't showing about over each other, the align as they would without the positioning, just the first one one line above the other one. Hope this helps you to clearify
    regards >_<

    ws. fgeller.de
    em. felix@fgeller.de
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Before trying to address your problem, may I suggest you apply code indentation, etc. for an easier to read layout
    Code:
    <td valign="middle" align="center">
       <div style="position:relative; 
                   top:32px;
                   left:32px;
                   visibility: visible; 
                   z-index:1;">                                  
    
          <img src="01.jpg" width="32" height="32" />
    
       </div>
    
       <div style="position:relative;  
                   top:32px;
                   left:32px;
                   visibility: visible; 
                   z-index:2;">                      
    
          <img src="02.jpg" width="32" height="32" />
    
       </div>
    
    </td>
    Now, relative positioning places the element relative to its initial position in the flow. The original space is left blank.

    Absolute positioning puts the element in an arbitrary position relative to its container. The original space is closed up.

    Try changing "position: relative" to "position: absolute"

    cheers,

    gary
    Last edited by kk5st; August 22nd, 2003 at 12:31 AM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo