CSS position Property

Description

The position property indicates what type of positioning is used for the element (static, relative, absolute, or fixed). Together with the position property, CSS properties such as top, right, bottom, and left are used; they allow you to offset the positioned element relative to a certain edge.

Initial value

static

Applies to

All elements except for generated content

Inherited

No

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS2, CSS3

JavaScript syntax

object.style.position

Syntax

position: static | relative | absolute | sticky | center | page | fixed

Values

• staticThis keyword let the element use the normal behavior, that is it is laid out in its current position in the flow. The top, right, bottom, and left properties do not apply.
• relativeThis keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
• absoluteDo not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.
• stickyThe box position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root and containing block and in all cases, including table elements, does not affect the position of any following boxes.
• centerThe box's position (and possibly size) is specified with the top, right, bottom, and left properties. The box is vertically and horizontally centered within its containing block and these properties specify offsets with respect to the box's centered position within its containing block.
• pageThe box's position is calculated according to the "absolute" model.
• fixedDo not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Example

<h1>h1 {position: static;}</h1> 

<div class="relative">div position: relative;

<div class="absolute">div position: absolute;</div> 

<div class="fixed">div position: fixed;</div>

</div>

body { 
   background: khaki;
   height: 2000px;
} 
h1 { 
   position: static;
} 
.relative { 
   position: relative; 
   left: 200px; 
   width: 200px;
   height: 250px;
   border: 5px solid;
} 
.absolute { 
   position: absolute;
   left: 40px; 
   width: 150px; 
   height: 100px;
   border: 5px solid green; 
} 
.fixed { 
   position: fixed; 
   left: 40px; 
   width: 150px; 
   height: 100px; 
   border: 5px solid red;
}

Browser Support

Desktop
4	12	1	1	4	1
Tablets / Mobile
≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 3rd November 2019