The position property manipulates the location of an element, like so:

.element {
    position: relative;
    top: 20px;

Relative to its original position the element above will now be nudged down from the top by 20px. If we were to animate these properties we can see just how much control this gives us (although this isn’t a good idea for performance reasons):

See the Pen fcdf9b19b6bed8da6af791d7433116b0 by CSS-Tricks (@css-tricks) on CodePen.

relative is only one of five values for the position property:


  • static: every element has a static position by default, so the element will stick to the normal page flow. So if there is a left/right/top/bottom/z-index set then there will be no effect on that element.
  • relative: an element’s original position remains in the flow of the document, just like the static value. But now left/right/top/bottom/z-index will work. The positional properties “nudge” the element from the original position in that direction.
  • absolute: the element is removed from the flow of the document and other elements will behave as if it’s not even there whilst all the other positional properties will work on it.
  • fixed: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
  • inherit: the position value doesn’t cascade, so this can be used to specifically force it to, and inherit the positioning value from its parent.


If a child element has an absolute value then the parent element will behave as if the child isn’t there at all:

.element {
  position: absolute;

See the Pen 7291a601af02608d928b1232d6456ec9 by CSS-Tricks (@css-tricks) on CodePen.

And when we try to set other values such as left, bottom, and right we’ll find that the child element is responding not to the dimensions of its parent, but the document:

.element {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

See the Pen e7d3b934a8ce213384dc119106b71b7d by CSS-Tricks (@css-tricks) on CodePen.

To make the child element positioned absolutely from its parent element we need to set this on the parent element itself:

.parent {
    position: relative;

Now properties such as left, right, bottom and top will refer to the parent element, so that if we make the child element transparent we can see it sitting right at the bottom of the parent:

See the Pen a8d5044672ee640eeb257d62c0d0156c by CSS-Tricks (@css-tricks) on CodePen.


The fixed value is similar to absolute as it can help you position an element anywhere relative to the document, however this value is unaffected by scrolling. See the child element in the demo below and how, once you scroll, it continues to stick to the bottom of the page:

See the Pen e0e72fa57f387265fb7a3aa7a296d684 by CSS-Tricks (@css-tricks) on CodePen.

More Information

Browser Support

In IE, fixed positioning only works in IE 7+ (and breaks in all versions if in quirks mode). Fixed positioning on Mobile WebKit only started working in iOS 5.

Chrome Safari Firefox Opera IE Android iOS
works works works works works works works


  1. User Avatar
    Druid of Lûhn
    Permalink to comment#

    Very nice!
    Lucky I pointed it out.

  2. User Avatar

    When I was younger and just starting Web Development, I could have used this guide to clearly lay out the differences of element positioning. This site is Awesome!

    • User Avatar
      Permalink to comment#

      Very true. I am starting and this website has answers to all my questions so far and I have been able to understand clearly too. Yay

  3. User Avatar
    Permalink to comment#

    Hey Chriss your site has always given me the best answer, you are well prepared. Bravo!

  4. User Avatar
    Yogesh Ugale, India
    Permalink to comment#

    Very Nice explanation of CSS positions. Thanks a lot.

  5. User Avatar
    Kushal Jayswal
    Permalink to comment#

    I have tried to write in depth article on CSS Positions:

  6. User Avatar
    Permalink to comment#

    I used position: not the first time, but when i tried it, it didn’t work, so i googled about, found to this site and when i was skimming this site, i read z-index ….

    … AND this solved my problem!

    Thanks a lot!

  7. User Avatar
    Sherry Bradford
    Permalink to comment#

    Here it is, 2015, and people still looking for this content because a lot of folks still on IE8. Unfortunately, what I’m looking for is how to get IE8 to behave with position:absolute. Position:relative doesn’t seem to let me add top/bottom/left/right to influence the position of something. Ah well, the quest continues. But this is awesome information and was very helpful. Thanks!

  8. User Avatar
    Permalink to comment#

    in chrome.
    example Absolute
    if set parent display:flex
    child behaves unpredictably
    so, how set child stable after text in parent, like in example, with flex parent?

  9. User Avatar
    Mike J

    Thanks for the articles! I used this information to fix up some positioning issues with a web site. You saved me some time and trouble. :)

    One critique: You have said here and in one other article that the position property “does not cascade”. Did you mean that it does not inherit or is not inherited? Cascading and inheritance are not the same. I tripped up a bit over the idea of a property not cascading…

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.