Div Box Positioning with Absolute and Relative Positioning

In the file Div-Box-Positioning-with-Absolute-and-Relative-Positioning.html, there are numerous examples of box positioning. The IE Box Model Problem is demonstrated, and the details of the nested divs fix are given. Note that not only is the outer div width not its normal width (but instead the sum of its 2 side borders and 2 side paddings and width), but only its width and margin are given. The inner div declares only its padding and border properties.

The top 3 boxes show that if you use absolute positioning with no top or left property declarations, but instead you use margin percent and pixel values, you need to put the divs in a certain order if they're to be positioned horizontally of one another. Most of the rest of the boxes demonstrate that, without positioning, boxes will follow normal flow: one following the next, vertically. They'll be tangent (touching) vertically unless you give margin values that keep their contents apart. The margins of 2 vertically tangent boxes will naturally collapse: the greater of the 2 values will get used while the lesser is 86ed. They're never added.

The 5th div in the code shows using margin values to keep boxes separated. The 6th div in the code shows padding use to keep text away from box edges. The 7th and 8th divs show that if you use absolute position and left and top properties, you can put the boxes wherever you want, even overlapping other content. The later divs in the markup code get to overlap the boxes that come earlier. The exception is if you add a CSS style to a div that gives it a high number. The 7th and 8th divs have the page's body display box as their context box. So their left and right and top and bottom property values specify offsets from the body. The body is their parent and ancestor. They are its children. But you can nest divs so the outer ones are parents of the inner ones, like in the Box Model Problem above. Since there's no positioning these 2 nested boxes are static, or in the normal flow, so their page positions are the same.

In case you're not following, here are the basics: Everything starts in the normal flow until it gets positioned. If it gets a fixed position it's positioned relative to the entire page and it doesn't scroll when the page scrolls. If it gets inherited for its positioning value, it gets the position value of its parent. If it gets a relative position, it gets positioned/offset relative to its normal flow. If it gets an absolute position, it gets positioned relative to its context box. Static merely means normal flow and it's used to reset a positioned element back to unpositioned. Do not use the right or bottom properties for positioning: they're too buggy.

To reset a box to be in the normal flow location so it can be the context box for some absolutely positioned children, just give the relative value for its position property and don't give any type of offset values. This is shown with the light green parent div at the bottom of this test page. It contains 4 children, which are each other's siblings. All of the 4 box's absolutely positioned offset measurements are relative to the top left of big parent div. We used these style rules on one of these nested children: top 40% and left 75%. We could have used pixels (px) or ems (1 em is the current font's size, so if the font is 16 pixels then 0.25em is 4 pixels) or inches (in) or centimeters (cm) or points (pt) as well as percentages (%).