Positioning HTML Elements with CSS3 and Layering
CSS3 Basics - Part 9
Forward: In this part of the series we talk about placement of HTML elements using CSS. We also see how you can make one element cover or be in front of another.
By: Chrysanthus Date Published: 23 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
CSS Normal Flow
Imagine that in your code, you have a series of inline elements and text, then a block-level (containing) element, then a series of inline elements and text again, then a block-level element, and finally a series of inline elements and text. All this code is inside a containing element such as the BODY or a DIV element.
Everything being equal (based on what we have learned so far), your browser will display the code as follows: It will start by displaying the inline elements and text, wrapping them to the next line as the end of the current line is reached. Then it will display the block-level element, which will occupy a complete horizontal stripe from the left end to the right end. After that the browser will continue to display the inline elements and text, wrapping then as the end of line is reached. Then it would display the second block-level element, which will as expected take one complete horizontal stripe from the left end to the right end. Lastly, it displays the inline elements and text, wrapping them. This is what is called the normal flow of HTML elements in CSS. Your web page design should always take a normal flow unless you want special features, as the following sub topics indicate.
It is possible for you to position an HTML element at a particular place on the area of your web page. As you can see from this possibility, the element so positioned, would have to cover the elements that are in the normal flow; and this is what actually happens. You can have many elements covering one another. Form the point of view of the web page user, one element is in front, the other element is behind the first, the next one is behind the second and so on. This covering of elements is called layering.
This group of covering elements is called a Stack. The position of an element in this stack is called the Stack Level or z-index position. Everything being equal, the BODY element is considered to be at z-index position zero. The elements in the normal flow are considered to be at z-index position 1. You can then place elements in the stack from z-index position 2 upward. So if you have 3 element to stack, one will be at z-index position 3, another and z-index position 4 and one at z-index position 5. The element with the greatest z-index is the one the user is seeing foremost; the rest are covered.
To do absolute positioning, you need at least the following four CSS properties:
position
This property takes the value, “absolute” meaning you want absolute positioning. For normal flow placement or positioning, you do not need this property or any property at all.
top
The value here is a number in px or percentage. The element is placed within the area of some containing element. This is the vertical distance from the top edge of the containing element, to the top edge of the element being placed.
left
The value here is also a number in px or percentage. The element is placed within the area of some containing element. This is the horizontal distance from the left edge of the containing element, to the left edge of the element being placed.
z-index
This is the z-index position of the element (layer). The value is a whole number (integer). Negative values are possible, but I will not talk about that. I advise you to start given your z-index position from 2 upwards.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {width:400px}
img {position:absolute; top:50px; left:50px; z-index:2}
</style>
</head>
<body>
text text text text text text text text text text text text text text text text text
text <br />
<div>
DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV DIV <img src="myImage.gif" />
</div>
</body>
</html>
The element for absolute positioning is placed anywhere within the containing element in the code. The CSS rule determines its exact position within the containing element at the browser. It can also be outside the containing element if you use negative values for the top and left properties, but I will not talk about that.
This positioning is similar to absolute positioning with the following differences:
- The element placed stays in a fixed (top and left) point within the client area (viewport) of the web page. The client area is the area between the toolbars and the taskbar of your web page
- There is only one containing element, which is always the client area and not a DIV, FORM, or other block-level element.
- It needs the position property and the value must be “fixed”.
- The value for the top property is measured from the top edge of the client area.
- The value for the left property is measured from the left edge of the client area.
- It needs a z-index property (from 2 and above).
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {position:fixed; top:75%; left:75%; z-index:2}
</style>
</head>
<body>
<img src="myImage.gif" />text <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />text
</body>
</html>
Note: Fixed Positioning works with the latest versions of major browsers. It does not work with old browsers or older versions of browsers.
Wow. We have learnt a lot. Well, we just have to continue in a step-by-step fashion to cover what is left. See you in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT