Absolute Positioning with CSS
When elements are positioned absolutely, they are removed from the normal flow. As a result, they do not affect the positioning of subsequent sibling elements. Learn how to use absolute positioning in the following steps.
- Set the
position
property toabsolute
. - Set one or more "offset" properties.
The "offset" properties are
top
,right
,bottom
, andleft
. Their values can be specified in number of units (e.g., 10px) or percentage of the containing block (e.g., 20%). These properties offset the element from its nearest non-statically positioned containing block element (i.e., with position set toabsolute
,relative
, orfixed
). If it has no ancestor that is non-statically positioned, then it is offset from the browser window. - The following example demonstrates absolute positioning:
This code renders the following:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <style type="text/css"> h1 { position:absolute; top:70px; left:50px; border:2px solid #006; padding:1px; background-color:#600; color:#eee; } #explanation { color:#006; font-weight:bold; font-size:1.2em; } #wrapper { width:600px; background-color:#def; border:1px solid #006; } </style> <title>CSS Absolute Positioning</title> </head> <body> <div id="wrapper"> <h1>CSS Absolute Positioning</h1> <h2>From the Left and the Top</h2> <div id="explanation"> <p>Notice how this text is in the upper corner.</p> <p>That's because the preceding h1 element has been absolutely positioned.</p> <p>Positioning an element absolutely takes the element out of the regular flow of the document.</p> </div> </div> </body> </html>
h1 {
position:absolute;
}
h1 {
position:absolute;
top: 70px;
left: 50px;
}