Positioning Schemes in CSS
CSS Rendering for HTML – Part 3
Foreword: In this part of the series, I talk about positioning schemes and their related properties.
By: Chrysanthus Date Published: 25 Dec 2015
Introduction
Normal Flow
In a containing block, the web page displays elements one after another in a line. When the line is full, it goes to the next line below and continues to display the elements. Now if any of the elements is a block-level element, it occupies all the width of the containing element; the rest of the elements should continue in the next line below.
Relative Positioning
Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (say B1) in this way has no effect on the box (say B2) next to it: B2 was given a position as if B1 was not offset and B2 is not re-positioned after B1's offset is applied. This means that relative positioning may cause boxes to overlap. As B1 is displaced, the portion it leaves behind, remains empty.
Floats
Assume that you have a line with inline elements that are not necessarily text boxes. If you float left, the inline element of the middle of the line, it will go right to the left end of the line, displacing other elements. If any element had already been floated in the line, then it will displace elements and become the second element of the line. Opposite effect takes place, if it was floated right (moving to the right end or just before the element at the right end).
Assume that you have a block level element in a containing block and the width of the block level element is less than the width of the containing block. This block level element can be floated to the left of its containing block. If that is done, lines of text or other inline elements can appear on the right and below the floated element. The opposite effect applies to floating right.
The floated element is not of the normal flow and it is not really part of the line in which it may be seen.
Assume that you have a containing block such as the HTML body element. Assume that the first coded element in the containing block is an element with long width and long height. Assume that this element is floated left in the containing block, such that the space remaining on its right in the containing block is small (has small width).
Assume that you type (code) a second element in the containing block after the floated element. Assume that the width of this second element is bigger than the width of the portion (space) on the right of the floated element in the containing block. If you display the web page, the second element will appear below the floated element (or overlap the floated element), and the portion on the right of the floated element will remain empty.
If you then code a third element after the second, and the width of the third element is smaller than the width of the portion on the right of the floated element, then this third element may appear in the portion on the right. This portion would no longer be entirely empty.
Next Element Bending below Floated Element
Assume that you float a small element to the left in a containing block. Assume that the rest of the content in the containing block are inline elements and text. The rest of the content will appear on the right and below the floated element. No problem; that is the meaning of float!
Second situation: Assume that you float a small element to the left in a containing block. Assume that the next element you code after the floated element is large (with text and boxes). The content of this second element will start on the right of the floated element. As you go down the page, the content of the second element appear under the floated element. To make the content of the second element, not to appear below the floated element, give the second element, a width less than the portion on the right of the floated element, and give the element the CSS display value of inline-block – see later.
The opposite effect of all what has been said above applies to a floated right element.
Imagine that you have a div element with three paragraphs. The second paragraph in the middle can be removed from the containing block to form its own containing block, where it will have its own children boxes in normal flow. In the div element the two remaining paragraphs will be placed next to one another. Absolute positioning is where a box is removed from its containing block to form a new containing block. This new containing block can be in front of its former containing block, and so covering parts of its former containing block. You can still remove another box from the former containing block to be in front of the first new containing block, and so the second new containing block would cover parts of the first new containing block.
Layered Presentation
As you can see from the above discussion, layers (walls) exist in CSS. The normal flow is layer 0. The layer in front, towards the reader, is layer 1; the layer in front of layer 1 is layer 2; the layer in front of layer 2 is layer 3; and so on. Now this layered numbers are coded using the CSS z-index property.
Fixed Positioning
The above two sections are dealing with absolute positioning. Fixed positioning is a sub category of absolute positioning. With normal absolute positioning, the absolute element will move up with the page, as you scroll the page down; it will moved down with the page as you scroll the page down.
For fixed positioning, the absolute element does not move as you scroll the web page up and down.
Coding
We have talked a lot above (useful talk though), now let us see some coding.
The z-index Property
This property gives the layered position of the element. The value is an integer. It could also be the reserved word, inherit.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<div>
<p>First paragraph</p>
<p style="position:absolute; z-index:3">Second paragraph</p>
<p>Third paragraph</p>
</div>
</body>
</html>
To use the z-index property, you must also use the position property with a value of absolute or fixed.
For the three position schemes of normal flow, float, and absolute, you can displaced the element with the properties called, top, right, bottom and width. The value of each of these properties can be length (number in px or em), in percentage, auto or inherit. auto means that the user agent (browser) chooses the value based on some considerations. When a value is inherit, it means the child element has the corresponding value of the parent.
The top Property
This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block. For relatively positioned box, the offset is with respect to the top edge of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to this property). So this property moves the element downward.
The right Property
This property specifies how far an absolutely positioned box's right margin edge is offset to the left of the right edge of the box's containing block. For relatively positioned box, the offset is with respect to the right edge of the box itself. So this property moves the element leftward.
The bottom Property
This property specifies how far an absolutely positioned box's bottom margin edge is offset above the bottom of the box's containing block. For relatively positioned box, the offset is with respect to the bottom edge of the box itself. So this property moves the element upward.
The left Property
This property specifies how far an absolutely positioned box's left margin edge is offset to the right of the left edge of the box's containing block. For relatively positioned box, the offset is with respect to the left edge of the box itself. So this property moves the element rightward.
For these 4 properties, you should normally use only the left and top properties or only the right and bottom properties.
Relative positioning is the normal flow positioning. In the scheme, the box can be displaced. When displaced, the portion left is not occupied. To insist that the positioning is relative, you have to use the property/value pair, “position:relative”. Try the following code:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<div>
<p>First paragraph</p>
<p style="position:relative; left:40px; top:30px">Second paragraph</p>
<p>Third paragraph</p>
</div>
</body>
</html>
The box is displaced right and down. Replace the left property with the right property and the top property with the bottom property, to see the effect.
Floats
You normally would float an element left or right. There is no top or bottom float. To float left (to the left), you will use the property/value pair, “float:left”. To float right (to the right), you will use the property/value pair, “float:right”. The float value can also be none or inherit. None means the box is not floated.
Absolute positioning works with the z-index. To indicate that the position is absolute, you have to use the property/value pair “position:absolute”. For the same CSS rule, you also need a z-index/value pair, “z-index:3”, where 3 here is just an example. You can use any other integer. Try the following code:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<p><span>first span </span><span style="position:absolute; z-index:2">second span </span><span>third span </span></p>
</body>
</html>
For inline-level elements the absolute element appears where it would have been (but in a separate layer) in the absence of the top, right, bottom, and left properties. Its space in the normal flow is taken up. For block-level elements the absolute element appears just below its containing block (but in a separate layer) in the absence of the top, right, bottom, and left properties. It space of the normal flow is taken up.
The absolute property also works with the top, right, bottom and left properties.
Fixed Positioning
Fixed positioning is a sub category of absolute positioning. To indicate that the positioning is fixed, you use the property/value pair, “position:fixed”. Under this condition, and when the page is scrolled, the box does not move. Its space of the normal flow is taken up. You can use the top, right, bottom and left properties with fixed positioning. These four properties are in relation to the viewport, for fixed positioning. With “position:fixed” in the CSS rule, you do not need “position:absolute”.
Time to take a break. Let us stop here and continue in the next part of the series.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
CSS Rendering for HTML
Simple Guide to Website Design
CSS Multi-column Layout Module
Media and CSS
Responsive Web Design
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK NEXT