position – CSS-Tricks

Less Absolute Positioning With Modern CSS

Chris Coyier — Wed, 13 Oct 2021 14:42:26 +0000

Ahmad Shadeed blogs the sentiment that we might not need to lean on position: absolute as much as we might have in the past. For one thing: stacking elements. For example, if you have a stack of elements that should all go on top of each other…

.stack {
  display: grid;
}
.stack > * {
  grid-area: 1 / -1;
}

All the elements occupy the same grid cell at that point, but you can still use alignment and justification to move stuff around and get it looking and behaving how you want.

What you are really saying with position: absolute is I want this element to be entirely removed from the flow such that it doesn’t affect other elements and other elements don’t affect it. Sometimes you do, but arguably less often than your existing CSS muscle memory would have you believe.

I’ll snag one of Ahmad’s idea here:

CodePen Embed Fallback

Both the tag and the title are positioned in a way we might automatically think of using absolute positioning. But again, something like CSS Grid has all of the alignment features we need to not only stack them vertically, but place them right where we want.

To Shared Link — Permalink on CSS-Tricks

Less Absolute Positioning With Modern CSS originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

#198: About the Position Property

Chris Coyier — Fri, 20 Nov 2020 15:51:41 +0000

static: the default
relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
absolute: top/right/bottom/left moves the element to that exact position, otherwise the same as relative
fixed: like absolute, but scrolling the page doesn’t move the element
sticky: like fixed, but it doesn’t become fixed until the page is scrolled past your set threshold
inherit: makes the position values whatever the parent’s position value is

The almanac has more detail.

#198: About the Position Property originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

position

Chris Coyier — Tue, 20 Mar 2012 03:03:24 +0000

The position property can help you manipulate the location of an element, for example:

.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):

CodePen Embed Fallback

relative is only one of six values for the position property. Here are the others:

Values

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.
sticky: the element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.
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.

Absolute

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;
}

CodePen Embed Fallback

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;
}

CodePen Embed Fallback

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:

CodePen Embed Fallback

Learn more about position: relative and position: absolute at DigitalOcean.

Fixed

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:

CodePen Embed Fallback

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Firefox	IE	Edge	Safari
4	2	7	12	3.1

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
108	107	3	8

Sticky

The sticky value is like a compromise between the relative and fixed values. As of this writing, it is currently an experimental value, meaning it is not part of the official spec and only partially adopted by select browsers. In other words, it’s probably not the best idea to use this on a live production website.

What does it do? Well, it allows you to position an element relative to anything on the document and then, once a user has scrolled past a certain point in the viewport, fix the position of the element to that location so it remains persistently displayed like an element with a fixed value.

Take the following example:

.element {
  position: sticky; top: 50px;
}

The element will be relatively positioned until the scroll location of the viewport reaches a point where the element will be 50px from the top of the viewport. At that point, the element becomes sticky and remains at a fixed position 50px top of the screen.

The following demo illustrates that point, where the top navigation is default relative positioning and the second navigation is set to sticky at the very top of the viewport. Please note that the demo will only work in Chrome, Safari and Opera at the time of this writing.

CodePen Embed Fallback

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Firefox	IE	Edge	Safari
91	59	No	91	7.1*

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
108	107	108	8*

Learn more about position: sticky at DigitalOcean.

More Information

Video on Feb 25, 2015

#110: Quick Overview of CSS Position Values

▶ Running Time: 13:34

position

Chris Coyier

Article on Jul 24, 2020

Absolute Positioning Inside Relative Positioning

position

Chris Coyier

Article on Aug 13, 2020

Absolute, Relative, Fixed Positioning: How Do They Differ?

position

Chris Coyier

Article on Sep 10, 2018

Creating sliding effects using sticky positioning

position

Preethi

Article on Feb 25, 2019

Dealing with overflow and position: sticky;

position

Chris Coyier

Article on Feb 6, 2020

Getting Fancy with position: sticky;

position

Chris Coyier

Article on Sep 14, 2020

How to Use CSS Grid for Sticky Headers and Footers

position

Adam Rackis

Article on Jan 29, 2020

Sticky Footer, Five Ways

position

Chris Coyier

Article on Mar 5, 2020

Position Sticky and Table Headers

position

Chris Coyier

Article on Jun 21, 2017

position: sticky;

position

Chris Coyier

Article on Feb 4, 2019

More Like position: tricky;

position

Chris Coyier

Article on Apr 5, 2011

What if there was no position: static;?

position

Chris Coyier

position originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

top / bottom / left / right

Matsuko Friedland — Wed, 07 Sep 2011 01:53:22 +0000

The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky.

div {
  :  ||  || auto || inherit;
}

You might use it, for example, to nudge an icon into place:

button .icon {
  position: relative;
  top: 1px;
}

Or position a special element inside a container.

.container {
  position: relative;
}
.container header {
  position: absolute;
  top: 0;
}

The value for top, bottom, left, and right can be any of the following:

any of the valid lengths of CSS
a percentage of the of the containing element’s height (for top and bottom) or width (for left and right)
auto
inherit

The element will will generally move away from a given side when its value is positive, and towards it when the value is negative. In the example below, a positive length for top moves the element down (away from the top) and a negative length for top will move the element up (towards the top):

See the Pen
Top: positive and negative values by Matsuko Friedland (@missmatsuko)
on CodePen.

Position

The placement of an element with a value for top, bottom, left, or right depends on its value for position. Let’s take a look at what happens when we set the same value for top on elements with different values for position.

`static`

The top property has no effect on unpositioned elements (elements with position set to static). This is how elements are positioned by default. You could use position: static; as one method to undo the effect of top on an element.

`relative`

When top is set on an element with position set to relative, the element will move up or down in relation to its original placement in the document.

See the Pen
Top: relative by Matsuko Friedland (@missmatsuko)
on CodePen.

`absolute`

When top is set on an element with position set to absolute, the element will move up or down in relation to its closest positioned ancestor (or the document, if there are no positioned ancestors).

In this demo, the pink box on the left is positioned 50px down from the top of the page because it has no positioned ancestor elements. The pink box on the right is positioned 50px down from the top of its parent, because the parent has a position of relative.

See the Pen
Top: absolute by Matsuko Friedland (@missmatsuko)
on CodePen.

`fixed`

When top is set on an element with position set to fixed, the element will move up or down in relation to the browser’s viewport.

See the Pen
Top: fixed by CSS-Tricks (@css-tricks)
on CodePen.

At first glance, it may seem like there isn’t a difference between absolute and fixed. The difference can be seen when you compare them on a page that has enough content to scroll. As you scroll down, the fixed position element is always in view, while the absolute position element scrolls away.

See the Pen
Scrolling: fixed vs. absolute by CSS-Tricks (@css-tricks)
on CodePen.

`sticky`

When top is set on an element with position set to sticky, the element will move up or down in relation to the nearest ancestor with a scrolling box (or the viewport, if no ancestor has a scrolling box), limited to the bounds of its containing element.

Setting top on a sticky positioned element doesn’t do much unless its container is taller than it is, and you have enough content to scroll. Like with fixed, the element will stay in view as you scroll. Unlike fixed, the element will fall out of view once it reaches the edges of its containing element.

See the Pen
Scrolling: fixed vs. sticky by CSS-Tricks (@css-tricks)
on CodePen.

Gotchas

Setting opposite sides

You can set a value for each of top, bottom, left, and right on a single element. When you set values for opposite sides (top and bottom, or left and right), the result might not always be what you expect.

In most cases, bottom is ignored if top is already set, and right is ignored if left is already set. When direction is set to rtl (right to left), left is ignored instead of right. In order for each value to have an effect, the element must have a position set to absolute or fixed and height set to auto (default).

In this example, we set top, bottom, left, and right to `20px`, and expect each side of the inner box to be 20px away from the sides of the outer box:

See the Pen
Setting top, bottom, left, and right by CSS-Tricks (@css-tricks)
on CodePen.

When fixed isn’t relative to the viewport

Elements with position set to fixed aren’t always positioned in relation to the viewport. It will be positioned relative to its closest ancestor with a transform, perspective, or filter property set to anything other than none, if one exists.

Adding or removing space

If you’ve positioned an element and found that there’s now an empty space or not enough space where you expected, it might have to do with whether the element is in or out of the document’s flow.

When an element is taken out of the document’s flow, it means that the space it originally took up on the page disappears. This is the case when an element is positioned absolute or fixed. In this example, the containing box of the absolutely positioned element has collapsed because the absolutely positioned element was removed from the document’s flow:

See the Pen
Document flow by Matsuko Friedland (@missmatsuko)
on CodePen.

Browser Support

You can take a peek, but there are no cross-browser concerns for the top property. Use at will.

top / bottom / left / right originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

left

Sara Cope — Tue, 06 Sep 2011 03:46:32 +0000

The left property in CSS goes hand in hand with positioning. By default, elements are static positioned in which the left property has no effect whatsoever. But when the positioning of an element is relative, absolute, or fixed, the left value plays a big role.

div {
  left: value (px, em, %, pt, etc) || auto || inherit;   /* can be negative */
}

“The Nudge” (Relative Position)

If you apply a left value to an element with relative positioning, it will “nudge” the element that direction.

If you apply both a left and right value, only the left value will be honored.

“The Place” (Absolute/Fixed Position)

If you apply a left value to an element with relative positioning, it will “place” that element at that value according to its nearest positioning context (meaning: its nearest parent element with some positioning value other than static, or the document itself).

Note that if you apply both a left and right value, it will stretch the element to hit both of those values.

Browser Support

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Works	Works	Works	5+	5.5+	Works	Works

left originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Absolute, Relative, Fixed Positioning: How Do They Differ?

Chris Coyier — Tue, 14 Oct 2008 12:45:48 +0000

Let’s talk about the position property. I know beginners are curious about this. Here’s a question I got recently:

I am fairly new to web design, and haven’t mastered the differences in positioning of elements. I know there is absolute, fixed, and relative. Are there any others? Also, do they majorly differ? And when should you use which?

Short answer

There are two more: static, which is the default, and sticky, which is a whole fancy thing. Yes, all of these majorly differ! Each of them is incredibly useful and which you should use of course depends on the desired result.

Longer answer

An important concept to understand first is that every single element on a web page is a block. Literally a rectangle of pixels. This is easy to understand when you set the element to display: block; or if that element is block-level by default like a

. This means you can set a width and a height and that element will respect that. But elements that are display: inline;, like a by default, are also rectangles, they just flow onto the page differently, lining up horizontally as they can.

Now that you are picturing every single page element as a block of pixels, we can talk about how positioning is used to get the blocks of pixels exactly where you want them to go.

.el {
  position: static;
  position: relative;
  position: absolute;
  position: fixed;
  position: sticky;
  position: inherit;
}

`static`

This is the default for every single page element. Different elements don’t have different default values for positioning, they all start out as static. Static doesn’t mean much; it just means that the element will flow into the page as it normally would. The only reason you would ever set an element to position: static; is to forcefully remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn’t cascade.

`relative`

This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will have no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you do give it some other positioning attribute, say, top: 10px;, it will shift its position 10 pixels down from where it would normally be. I’m sure you can imagine, the ability to shift an element around based on its regular position is pretty useful. I find myself using this to line up form elements many times that have a tendency to not want to line up how I want them to.

There are two other things that happen when you set position: relative; on an element that you should be aware of. One is that it introduces the ability to use z-index on that element, which doesn’t work with statically positioned elements. Even if you don’t set a z-index value, this element will now appear on top of any other statically positioned element. You can’t fight it by setting a higher z-index value on a statically positioned element.

The other thing that happens is it limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block. This brings up some powerful opportunities which I talk about here.

`absolute`

This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left, bottom, and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relative to the page itself.

The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.

`fixed`

A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

This might be used for something like a navigation bar that you want to remain visible at all times regardless of the pages scroll position. The concern with fixed positioning is that it can cause situations where the fixed element overlaps content such that is is inaccessible. The trick is having enough space to avoid that, and tricks like this.

`sticky`

Sticky positioning is really unique! A sticky element will just sit there like a static element, but as you scroll past it, if it’s parent element has room (usually: extra height) the sticky element will behave as if it’s fixed until that parent element is out of room. It sounds weird in words like that, but it’s easy to see what’s happening in a demo.

Layout like float, flexbox, and grid.
The Box Model

Absolute, Relative, Fixed Positioning: How Do They Differ? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

position – CSS-Tricks

Less Absolute Positioning With Modern CSS

#198: About the Position Property

position

Values

Absolute

Fixed

Desktop

Mobile / Tablet

Sticky

Desktop

Mobile / Tablet

More Information

top / bottom / left / right

Position

static

relative

absolute

fixed

sticky

Gotchas

Setting opposite sides

When fixed isn’t relative to the viewport

Adding or removing space

Browser Support

left

“The Nudge” (Relative Position)

“The Place” (Absolute/Fixed Position)

Browser Support

Absolute, Relative, Fixed Positioning: How Do They Differ?

Short answer

Longer answer

static

relative

absolute

fixed

sticky

Related Concepts

`static`

`relative`

`absolute`

`fixed`

`sticky`

`static`

`relative`

`absolute`

`fixed`

`sticky`