[Shelby]

I have a couple of questions on box positioning. I want to have a box defined with a DIV that would not take up the entire window. Within that box there will be two boxes defined using DIV's, one visible one and one hidden. I will be toggling their visibility using Javascript, but they will occupy the same area in the main box. In order to be sure they occupy the same space I would think I would need to use absolute positioning. When using absolute positioning, would it render as a point within the main box, or would it be rendered using the entire window? Or would that depend on the rendering engine? For example, say the boxes positioning was top:20px and left:100px. Would the position be in relation to the parent box or the entire window?

Also, if these boxes were of different heights, would the page render showing the space of the larger box even if it was hidden? Or would it only render the page using the visible box not taking into consideration the larger one that is not visible?

[End User]

Originally Posted by Shelby

When using absolute positioning, would it render as a point within the main box, or would it be rendered using the entire window?

Unless I'm mistaken, "absolute" means from the upper left corner of the screen and is not referenced with respect to any page elements. 'Relative' positioning is referenced to the parent object.

[Shelby]

That being the case, how would you specify a location within a page element using relative positioning? If absolute is in reference to the screen, the users screen resolution would determine where an absolute position would be and would change depending on that resolution. Can you specify a specific position within an element using relative positioning where it would remain the same no matter the user's screen resolution?

For example, by using position:relative, top:20px, and left:100px, would that position the boxes at the same point within the parent element no matter the screen resolution?

[job0107]

Look your making this too hard.
You have an outer div with width and height set.
You have two inner divs with their width and height set.
You want both inner div's to occupy the same space, but one at a time.
First of all define the dimensions and position of one inner div, relative to the outer div.
You can position the inner div using the outer div's padding property or the inner div's margin property.
You can use fixed values or percentages.

Now that you have one inner div defined and positioned,
create the second inner div using the style of the first inner div.
This way both inner divs will be sized and positioned alike.

Now all you have to do is toggle their display property on and off.
With only one div occupying the space at a time.

[job0107]

Originally Posted by End User

Unless I'm mistaken, "absolute" means from the upper left corner of the screen and is not referenced with respect to any page elements. 'Relative' positioning is referenced to the parent object.

It's not quite that way.

If you have an outer div with margin-left:20px and margin-top:20px,
and you have an inner div with position:absolute;left:0;,
The inner div's left will goto absolute 0, but the inner div's top will remain relative to it's containing div.

And if you change the inner div to position:absolute;top:0;,
then the inner div's top will goto absolute 0 and the inner div's left will remain relative to it's containing div.

But if you set the inner div to position:absolute;left:0;top:0;
then it will goto absolute left:0, top:0.

[End User]

Originally Posted by job0107

If you have an outer div with margin-left:20px and margin-top:20px, and you have an inner div with position:absolute;left:0;,
The inner div's left will goto absolute 0, but the inner div's top will remain relative to it's containing div.

And if you change the inner div to position:absolute;top:0;,
then the inner div's top will goto absolute 0 and the inner div's left will remain relative to it's containing div.

That's more or less what I meant (by 'parent object'), but I probably (obviously, lol) wasn't being very clear.

[Shelby]

I think I understand it now (I hope). I just was not sure whether the absolute positioning would be positioned from the screen 0,0 or the parent element (outer div) 0,0. I know once I set up the first inner div, I would use the same positioning for any subsequent inner divs I wanted to occupy the same space and then would just toggle the visibility. I just needed to clear up whether to use relative or absolute positioning.

[job0107]

Originally Posted by Shelby

I think I understand it now (I hope). I just was not sure whether the absolute positioning would be positioned from the screen 0,0 or the parent element (outer div) 0,0. I know once I set up the first inner div, I would use the same positioning for any subsequent inner divs I wanted to occupy the same space and then would just toggle the visibility. I just needed to clear up whether to use relative or absolute positioning.

If you use relative positioning then it's best to put the inner element in an outer element.

But if you use absolute positioning the element can be totally independent from all other elements on the page. And as long as two same elements share the same style they can share the same space.

It just depends on what you plan on doing with the elements on the page.

A person could get real creative and use Javascript to create motion and other effects.

then would just toggle the visibility

Lets get something strait here.
display and visibility are two very different properties.
The visibility property only makes an element visible or invisible, it doesn't share it's space.
The display property makes the element exist or not exist.
And if you don't have something to replace it with then the space it occupied closes up.

[Shelby]

Originally Posted by job0107

Lets get something strait here.
display and visibility are two very different properties.
The visibility property only makes an element visible or invisible, it doesn't share it's space.
The display property makes the element exist or not exist.
And if you don't have something to replace it with then the space it occupied closes up.

Okay, what I'm planning is to have an inner element contain several different contents. I planned on using Javascript to toggle them on and off depending on the link that was clicked. In effect having all the content in one inner div. So you're saying I should toggle the display element and not the visibility? There would never be an instance when I would want more than one of the inner divs displayed.

[job0107]

Originally Posted by Shelby

Okay, what I'm planning is to have an inner element contain several different contents. I planned on using Javascript to toggle them on and off depending on the link that was clicked. In effect having all the content in one inner div. So you're saying I should toggle the display element and not the visibility? There would never be an instance when I would want more than one of the inner divs displayed.

Lets say you populate a div with data from a database.
And this data is stored in a collection of button elements that are styled to look like anchors, to form a directory or index.
The buttons use the onclick event to call Javascript to populate a hidden div ( display:none; ).
Then the hidden div is made visible ( display:block; ) and the directory/index div is made hidden ( display:none; ).
If you put a link back to the directory/index div, then you can toggle back and forth between the directory/index and the selection by changing their display property.

Ajax could be used to populate the hidden div with anything you could think of.

This technique applies to relative and absolute elements.

You can stack several divs. Just make sure only one at a time has ( display:block; ) the others must have (display:none; ) and they can all share the same style. But that doesn't mean you can't have a smaller one and a bigger one. Or have one on the left side and one on the right, etc...
Just use your imagination.

You could use a single div, but I believe that would be much slower.