Tuesday, 16 July 2013

CSS Positionning -Fixed, Absolute,Relative and Static Position in CSS

Posted on by aspsolutionkirit with No comments


Positioning

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Example of Vertical Menu in CSS Beautiful Vertical Menu Using CSS

OverLaps Layer with Each Other in CSS Display Layer on EachOther or OverLaps Layer

Fixed Positioning

An element with fixed position is positioned relative to the browser window.
It will not move even if the window is scrolled:

Example

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Note: Internet Explorer supports the fixed value only if a !DOCTYPE is specified.

Relative Positioning

A relative positioned element is positioned relative to its normal position.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of a relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
Relatively positioned element are often used as container blocks for absolutely positioned elements.

 

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:


Example

h2
{
position:absolute;
left:100px;
top:150px;
}


Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.

The principle behind CSS positioning

Imagine a browser window as a system of coordinates:

The principle behind CSS positioning is that you can position any box anywhere in the system of coordinates.
Let's say we want to position a headline. By using the box model the headline will appear as follows:
Headline in a box
If we want this headline positioned 100px from the top of the document and 200px from the left of the document, we could type the following in our CSS:
 
h1 {
        position:absolute;
        top: 100px;
        left: 200px;
}
 
The result will be as follows:

As you can see, positioning with CSS is a very precise technique to place elements. It is much easier than trying to use tables, transparent images or anything else.

Absolute positioning

An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned.
To position an element absolutely, the position property is set as absolute. You can subsequently use the properties left, right, top, and bottom to place the box.
As an example of absolute positioning, we choose to place 4 boxes in each corner of the document:

 
#box1 {
        position:absolute;
        top: 50px;
        left: 50px;
}
 
#box2 {
        position:absolute;
        top: 50px;
        right: 50px;
}
 
#box3 {
        position:absolute;
        bottom: 50px;
        right: 50px;
}
 
#box4 {
        position:absolute;
        bottom: 50px;
        left: 50px;
}
 

Relative positioning

To position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated.
The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. This way, the element still obtains a space in the document after it is positioned.
As an example of relative positioning, we can try to position three pictures relatively to their original position on the page. Notice how the pictures leave empty spaces at their original positions in the document:
 
#dog1 {
        position:relative;
        left: 350px;
        bottom: 150px;
}
#dog2 {
        position:relative;
        left: 150px;
        bottom: 500px;
}
 
#dog3 {
        position:relative;
        left: 50px;
        bottom: 700px;
}

Absolute CSS Positioning

Absolute positioning is the easiest to understand. You start with the CSS position property:
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the Web page.
If you want to position an element 10ems from the top of the document window, you would use the "top" offset to position it there with absolute positioning:
position: absolute;
top: 10em;
This element will then always display 10em from the top of the page - no matter what else displays there in normal flow.
The four positioning properties are:
To use them, you need to think of them as offset properties. In other words, an element positioned right 2em is not moved right 2em. It's right side is offset from the right side of the window 2em. The same is true for the other three.

Relative Positioning

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
For example, if you have three paragraphs on your based on it's current location - not from the original sides of the view port. Web page, and the third has a position: relative style placed on it, it's position will be offset
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p style="position: relative;left: 2em;">Paragraph 3.</p>
In the above example, the third paragraph will be positioned 3em from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute; anything following it would display on top of it, because it would no longer be in the normal flow of the document.

This entry was posted in :

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)