• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

CSS Positioning

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 elements content is toll 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.

 

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;

}

<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN”

http://www/w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html>

<head>

<style type=text/css”>

p.pos_fixed

{

Position:fixed;

Top:30px;

Right:5px;

}

</style>

</head>

<body>

<p class=”pos _fixed “>Some more text</p>

<p>b>Note:</b> IE7 and IE8 supports the fixed value only if a

<!DOCTYPE is specified.</p>

<p>Some text</p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</ p> <p>Some text</

</body>

</html>

Note

IE7 and IE 8 support the fixed value only of a !DOCTYPE is specified.

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

Fixed positioned elements can overlap other elements.

 

Relative Positioning

A relative positioned element is positioned relative to its normal position.

Example

h2.pos_left

{

position:relative;

left:-20px;

}

h2.pos_right

{

position:relative;

left:20px;

}

</style>

</head>

<body>

<h2>This is a heading with no position</h2>

<h2 class=”pos_left”>This heading is moved left according to its normal position</h2>

<h2 class=”pos_right”>This heading is moved right according to its normal position</h2>

<p> Relative positioning moves an element RELATIVE to its original position.</p>

<p> The style”left:-20px”subtracts 20 pixels from the elements original left position.</p>

<p> The style”left:-20px”adds 20 pixels from the elements original left position.</p>

</body>

</html>

The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.

Example

H2.pos_top

{

position:relative;

top:-50px;

}

<html>

<head>

<style type=text/css”>

h2.pos_top

{

position:relative;

top:50px;

}

</style>

</head>

<body>

<h2>This is a heading with no position<h2>

<h2class=”pos _top”> This heading is moved upwards according to its normal position</h2>

<p><b>Note:</b> Even if the content of the relatively positioned element is moved, the reserved space for the element is still preserved in the normal flow.</p>

</body>

</html>

Relatively positioned elements 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;

}

<html>

<head>

<style type=text/css”>

h2

{

position: absolute;

left:100px;

top:150px;

}

</style>

</head>

<body>

<h2>This is a heading with an absolute position</h2>

<p>With absolute positioning , an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.<p>

<body>

<html>

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

Absolutely positioned elements can overlap other elements.

 

CSS-Layers

CSS gives you opportunity to create layers of various divisions. The CSS layers refer to applying the z-index property to elements that overlap each other.

The z-index property is used along with position property to create an effect of layers. You can specify which element should come on top and which element should come at bottom.

A z-index property can help you to create more complex webpage layouts. Following is the example which shows how to create layers in CSS.

<div style=”background-color: red;

width:300px;

height :100px;

position :relative;

top:10px;

left:80px;

z-index:2”>

</div>

<div style=”background-color: yellow;

width:300px;

height:100px;

position :relative;

top:-60px;

left:35px;

z-index:1”>

</div>

<div style=”background-color: green;

width:300px;

height:100px;

position :relative;

top:-220px;

left:120px;

z-index:3”>

</div>

 

Summary
Review Date
Reviewed Item
CSS Positioning
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on CSS Positioning"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.