position - HTML CSS CSS Property

HTML CSS examples for CSS Property:position

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. position

Description

The position CSS property sets how an element is positioned.

The following table summarizes the position Property.

Item Value
Default value: static
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


position:      static | relative | absolute | fixed | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
static Default value. Elements render in order, as they appear in the document flow
relative The element is positioned in normal flow.
absolute The element is positioned relative to its first positioned (not static) ancestor element
fixedThe element is positioned relative to the browser window. When printing, the element is printed on every page.
initial Sets this property to its default value.
inherit take the value of its parent element position property.

The example below shows the position property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS position property</title>
  <style type="text/css">
    h1 {<!-- w ww  .  j  a  va2 s  .  c o  m-->
        position: absolute;
        top: 100px;
        left: 150px;
        padding: 30px;
        font-family: Arial, sans-serif;
        background: #9acd32;
    }
</style>
 </head>
 <body>
  <h1>Absolute Positioning</h1>
  <p><strong>Note:</strong> The heading below is absolutely positioned 100px from the top edge, and 150px from the left edge of the viewport.</p>
 </body>
</html>

Related Tutorials