CSS position Property
Description
The position
CSS property determines how an HTML element is positioned within its containing element or the document as a whole. It plays a crucial role in defining the layout of web pages. There are several values for the "position" property, including "static" (the default, where elements follow the normal document flow), "relative" (positions an element relative to its normal position), "absolute" (positions an element relative to its closest positioned ancestor), and "fixed" (positions an element relative to the viewport, so it remains in a fixed position even when the page is scrolled). The position
property is an essential tool for web developers to create complex and responsive layouts.
- Initial value
- static
- Applies to
- All elements except for generated content
- Inherited
- No
- Computed value
- As specified
- Animatable
- No
- JavaScript syntax
- object.style.position
Interactive Demo
In this demo you can control the position
property for the yellow box.
To see the effect of sticky
positioning, select the position: sticky
option and scroll
this container.
The element will scroll along with its container, until it is at the top of the container (or reaches the offset
specified in top
), and will then stop scrolling, so it stays visible.
The rest of this text is only supplied to make sure the container overflows, so as to enable you to scroll it and see the effect.
Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.
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
The following table will show you the current browser support for the CSS position
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 1 | 1 | 4 | 1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 14 | 1 | 1 | 37 |
Last updated by CSSPortal on: 3rd January 2024