Right click and choose to view the source code to see exactly how CSS works for positioning.
Matches the order in source code. No POSITION property set. No LEFT or TOP properties set.
The beige DIVs below are contained within the lavender DIV tag in the HTML code. But, the set of boxes is too tall to fit, so they hang down below. Later lines of text are on top.
There are blank paragraphs that overhang to force the rest of the page into the clear!
This text is after the DIVs.
So it this text.
When setting a position with LEFT and TOP, positive numbers move the object to the right or down. Negative numbers move it to the left or up.
The title of this page is in fixed position. As you scroll the page, the title stays at the top of the window! It floats over normal position items but slides underneath positioned items whose codes comes later on the page. (Check it out with the lavender DIV below. Fixed position is usually annoying!!
LEFT and TOP values are based on distance from top left corner of the first positioned tag that contains the element you are positioning. If there is not a containing tag, it's the distance from the top left corner of the page.
Use carefully! (You may need to resize your window to see all of the text!)
Whenever a new line of text is added above this section, new absolute distances must be entered to keep the text from running underneath!
If the window is too wide, the text below gets covered!
If the window is too narrow, the text above gets covered up.
LEFT and TOP values are based on distance from the 'normal' location. Text will not wrap underneath if the window is narrow! That's a GOOD thing. But a horizontal scrollbar will show in the browser in that case. That's the BAD thing.
In the example below all DIVs have relative position. The inside DIVs have LEFT and TOP values that line them up across the top of the lavender DIV. Widths were set. No heights were set.
What's all that blank area below the beige DIVs?
The outside DIV enlarged to
reserve space for all four inside DIVs
in their normal
positions, one below the other at the left. Positioning the DIVs left empty space behind. This is usually a BAD PLAN!
DIV 4 automatically got taller to hold its longer text.
Relative DIV, no HEIGHT set
By setting the HEIGHT of the outside DIV as well as all the parts inside, there will be no reserved space.
But, text that does not fit in its container falls out of the fixed height area! Whoops. There are ways to manage that.
Relative positioning with HEIGHT set. TOP set for a stair-step effect.
When you expect to have more text than will fit naturally, the property overflow:auto will add a scrollbar ONLY IF there is enough text to need it. To allow for the scrollbar to show up on the right edge without hiding any text, set a right padding of 20px.
Setting an outside DIV with relative positioning and the inside DIVs with absolute positioning, works better!
The absolute positions are set compared to the current container, not the whole page.
Resizing the window does not make text run underneath other parts of the page.
Relative DIV - Rectangles positioned as overlapping and stair-stepped
DIVs can easily overlap. The normal stack order is the order that the elements appear in the code on the page. The first item in the code is the one on bottom and the last item is the one on top.
The DIVs in the example above show this order.
You can set the stacking order yourself with the property Z-INDEX. The values can be positive or negative integers. The highest z-index value is on top and the lowest is on bottom.
The example below has set the z-index for the first DIV to 1, and the others do not have this property set, so they have z-index of zero. That puts DIV 1 on top.
Relative DIV with Height set
This line of text follows the Z-INDEX illustration.