CSS <div> absolute/relative position

Dev Shed Forums Sponsor:

August 21st, 2003, 07:22 PM

fgeller

:(){ :|:&};:

Join Date: Aug 2003

Location: Germany

Posts: 297

Time spent in forums: 11 h 4 m 52 sec
Reputation Power: 5

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

August 21st, 2003, 07:29 PM

Matthew Doucette

matthewdoucette.com

Join Date: May 2002

Posts: 635

Time spent in forums: 9 h 59 m 37 sec
Reputation Power: 7

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™

"Discussion is an exchange of knowledge; argument is an exchange of ignorance."

August 21st, 2003, 07:47 PM

fgeller

:(){ :|:&};:

Join Date: Aug 2003

Location: Germany

Posts: 297

Time spent in forums: 11 h 4 m 52 sec
Reputation Power: 5

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

August 22nd, 2003, 12:12 AM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,541

Time spent in forums: 1 Month 2 Days 1 h 27 m 15 sec
Reputation Power: 597

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

__________________
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.

Ask a better question, get a better answer.

Last edited by kk5st : August 22nd, 2003 at 12:31 AM.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: