This is the first block (first section) of the page. In this the width has not been set so it should take up the entire width of the page. We are going to give this a background color of blue, and a font color of yellow.
This is the first block (first section) of the page. In this the width has been set so it should take up a portion of the width of the page. We are going to give this a background color of blue, and a font color of yellow.
This is the second block. This has been defined as a divison with a positioning of relative and a left and top displacements. Because it is relative, the following divisions continue with the flow, after the amount this divison would have taked had it not been defined as "relative". In any event, this divison is now going to overlap the forthcoming division(s)
This is the third block. Since this block does not have a position defined, it is going to get rendered in the screen flow as nothing ever happened, ignoring any new positioning of previously defined "relative" divisions.
This is the fourth block. This is a normal block with no position defined. It should show up as normally in the flow.
This is the 5th block. This block has been defined with a position of absolute. This fixes its position in the flow and is ignored by the following divisions (as exhibited with the "6th block -> to the right" and "7th block -> underneath it") as if it doesn't exist to begin with. As such other sections can be overlaped by it (unless they specify their own position). If divisions (sections/blocks) are overlapping then in order to specify which division comes to the front we will have to use z-index.
This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block. This is the 6th block.
This is the 7th block. If we do not define it's position then it could be overlapped by an absolutely positioned division or a fixed division (such as block 5). In our style sheet for this division we could either define a z-index of greather than what the other "absolute" blocks may have defined if we want this block to be on top. What I have done here is instead used to define "opactity" of .8 so it becomes party visible (any opactiy of less than 1 will make it appear).
This is the 8th block and has been defined as a normal block.
By now you have seen how relatively positioned divisions (sections/block) in a page are rendered (normal flow in the sense they are acknowledged by following divisions. The only difference is that they can have relative offsets defined) in the flow of the page (depicted with a green background and white text).
You have also seen how "absolutely" positioned divisions are rendered (the following divisions ignore them, however they overlap the following divisions. Overlapping can be handled by z-index (must define positioning as relative) or opactity.
In the next few divisions (sections/blocks) we are going to look into fixed positoned divisions.
However, before we do that I want to use float left for this divsion, and the next so they line up next to each other. We will do the same when demoing margins and you will see how the margins are preserved
This is the 9th block (divisions). Both the prior division and this divsion where specified a float of left, therefore the divsion does start from a new paragraph instead it starts adjacent to the last division.
This is the 10th block. Even though this division does not have a float of any type defined, it starts immediately after the previous division because the previous division was defined as a float.
To avoid this you will have to clear the float. I am going to show that in the next block.
This is the 11th block. In this I have cleared the float. As such this division will start immediately following the previously floated divsions.
This is the 12th block. This is a normal division with no positions and offsets defined.
This is the 13th division. This is an absolute position division with a top and left offset of 200px each (unlike the 5th block that did not have a top/left offset defined). Since it has an offset defined, it takes those from the top of the page.
This is the 14th block. Even though it follows division 13 in the flow it skips division 13 as division 13 has been defined as an absolute positioned division (in this case with a top and left offset of 200px each).
This is the 15th block. This is being defined as a "fixed" position division. Unlike divisons that are defined with an "absolute" position, divisions that are defined with a "fixed" position must specift the offset (top/left/etc.). This division has been deined with a top and left offset of 100px each
These types of divisions are ideal for menus.
This is the 16th block. This is a normal division with no positions and offsets defined.