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>
You liked the article?
Like : 0
Vote for difficulty
Current difficulty (Avg): Medium
About Author
Name
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
Stay Updated
Get stories of change makers and innovators from the startup ecosystem in your inbox