You can determine the type of positioning for an area or an element. The position property is used for this. This property specifies how an element should ultimately be positioned. There are a total of four different positioning variants to choose from.
- static - no special positioning is used and a normal text flow takes place.
- relative - relative positioning takes place, which is based on the normal position or starting position of the element.
- absolute - absolute positioning takes place via the top, bottom, left and right properties. Absolutely positioned elements are outside the normal text flow. The absolute position is calculated relative to the edges of the parent element (but only if this does not have the position: static property).
- fixed - the element is positioned absolutely. The element remains in place when scrolling.
The first two variants enable variable positioning. Here, elements are positioned in relation to each other. The following two examples show how this type of positioning could look:
- Element 2 is positioned 30 pixels offset in relation to element 1.
- Element 2 is placed behind element 1.
The situation is different with fixed and static. These allow elements to be placed in very specific positions. The positioning information refers to the parent element or the browser window. Here is an example:
- Element 1 is placed exactly 30 pixels from the right-hand edge and 20 pixels from the top edge of the browser window.
The different positioning variants are presented in detail below. But first a note: Floating plays an important role in connection with the positioning of elements. I will go into more detail about this important CSS principle in the next tutorial. Basically, floating is about how the elements of the website flow in the document. Elements are pushed as far as possible in the respective direction. The element flow can be explicitly determined by the type of positioning.
Relative positioning
By using relative positioning via position: relative, two things happen:
- The box is moved out of its normal flow.
- The original position of the element is reserved.
By reserving the original position, the other elements behave as if the element is actually still present in its position.
Example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> div { width: 20%; background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } #box { position: relative; top: 25px; right: 25px; background-color:#33CCFF; } </style> </head> <body> <div id="box">Box 1</div> <div>Box 2</div> <div>Box 3</div> </body> </html>Three boxes have been defined here.
Boxes 2 and 3 have not been given any positioning instructions. They therefore follow the normal document flow. Box 1, on the other hand, has been positioned relatively. As a result, boxes 2 and 3 remain completely unaffected by box 1. The space of box 1 is therefore not taken up by these boxes. The top, bottom, left and right specifications are used to position the boxes. The relative positioning is based on the original position in the document flow.
- top: 25px - the box is moved 25 pixels downwards. At the normal position of the box, 25 pixels are inserted at the top.
- right: 25px - the box is moved 25 pixels to the left. At the normal position of the box, 25 pixels are inserted on the right.
The pixel specifications are relative to the original position. The specifications determine where the value is inserted, i.e. top and right. This aspect is decisive. The specifications do not determine where the box is moved to.
The absolute positioning
We continue with absolute positioning. This type of positioning takes the element completely out of the flow. The other elements on the page behave as if the element were not present at all.
An example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> div { width: 20%; background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } #box { position: absolute; top: 25px; right: 25px; background-color:#33CCFF; } </style> </head> <body> <div id="box">Box 1</div> <div>Box 2</div> <div>Box 3</div> </body> </html>Three boxes have also been defined here. Box 1 is positioned absolutely.
Unlike with relative positioning, no space is reserved for box 1. Boxes 2 and 3 slide to the top.
The positioning specifications top, right, bottom or left are no longer based on the original position of the box in the flow. Instead, the information refers to the next surrounding element that was positioned with relative, absolute or fixed. If there is no surrounding element, the positioning is relative to the top element of the document tree, i.e. to HTML.
Positioning with fixed
Elements can be fixed with position: fixed. Here is another example:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.en</title> <style> p { margin-left: 25%; } #fixed { position: fixed; top: 20px; left: 20px; background-color:#33FFCC; width: 20%; padding: 10px; border: 1px solid black; } </style> </head> <body> <div id="fixed">Splitter effect part 1</div> <p>For a limited time only, the latest tutorial or video training in the online view or the content from the download category is free of points. Find out more here ...</p> </body> </html>The fixed box does not scroll, but always remains in the position assigned to it.
For fixed boxes, the surrounding element is always the browser window.
Please note that there are also considerable problems with fixing elements in older browsers. IE6, for example, does not do what it is supposed to do. If you also want/need to optimize your web pages for this browser, you now have two options:
- Do without fixed boxes.
- Use hacks for IE.
If you want to use a hack, I recommend the page http://thestyleworks.de/tut-art/iewinfixed.shtml. It uses a small JavaScript to show you how to get fixed boxes for this browser.
