CSS — How Should Elements Be Positioned?

5 min readJan 17, 2023

The CSS property position introduces different approaches to position elements on web pages, in this article, we will go through how different values of the position property are used to position elements.

🇨🇳 To read this article in Chinese, please visit my Zhihu. 文章的中文版请戳我的知乎。

1. Static Positioning

🔍 1.1 `position: static;`

Static positioning is the default that every element gets. It just means “put the element into its normal position in the document flow — nothing special to see here.”

#static-positioning1 {
}

#static-positioning2 {
  position: static;
}

Static positioning is the default way to position elements, so the above 2 elements have the same positioning behaviour: static positioning.

1.2 When to Use Static Positioning?

Usually, if we want elements to take their normal position as we define them in the document flow, they have static positioning.

Some common cases that have static positioning are:

Articles/news (for example any Medium story)
List of items (for example the search result page)

2. Relative Positioning

🔍 2.1 `position: relative;`

Relative positioning is very similar to static positioning, except that once the positioned element has taken its place in the normal flow, you can then modify its final position by the top, right, bottom and left properties, including making it overlap other elements on the page by the z-index property.

<div id="relative-positioning1">1</div>
<div id="relative-positioning2">2</div>
<div id="relative-positioning3">3</div>

div {
  width: 50px;
  height: 50px;
}

#relative-positioning1 {
  position: relative;
  border: 3px solid blue;
  background: lightblue;
}

#relative-positioning2 {
  position: relative;
  border: 3px dotted red;
  background: pink;
  top: 20px;
  left: 10px;
  z-index: 2;
}

#relative-positioning3 {
  position: relative;
  border: 3px dashed green;
  background: lightgreen;
}

⚠️ Note: No matter how you modify the position of the elements with relative positioning, those elements are still in the normal document flow. Take the above code as an example, even though we changed the final position of the #relative-positioning2 div, the document flow keep a gap with the #relative-positioning2 div’s size between the #relative-positioning1 div and the #relative-positioning3 div.

2.2 When to Use Relative Positioning?

Since the differences between relative positioning and static positioning are that relative positioning can use the CSS left, top, right, bottom, and z-index properties, if you want to use those properties, try relative positioning.

3. Absolute Positioning

🔍 3.1 `position: absolute;`

An element with absolute positioning will be positioned absolutely from its closest ancestor element with position: relative;, if there is no such element, the absolutely positioned element will be contained in the initial containing block.

An absolutely positioned element no longer exists in the normal document flow. Instead, it sits on its own layer separate from everything else, which means that we can create isolated UI features that don’t interfere with the layout of other elements on the page.

<div id="relative-positioning">
  <div id="absolute-positioning" />
</div>

#relative-positioning {
  position: relative;
  width: 100px;
  height: 100px;
  border: 3px solid blue;
}

#absolute-positioning {
  position: absolute;
  top: 10px;
  left: -10px;
  width: 40px;
  height: 20px;
  background: lightblue;
}

3.2 When to Use Absolute Positioning?

Some common cases to use absolute positioning are:

Markers/tags of elements (for example the “Bestseller” tag of a product on Amazon)
Mask of elements (for example a dark mask when you hover on a button)
Operations to elements (for example the “Add to list” icon when you hover on a product on AliExpress)
Popup windows

4. Fixed Positioning

🔍 4.1 `position: fixed;`

Fixed positioning usually fixes an element in place relative to the visible portion of the viewport.

<div id="fixed-positioning" />

#fixed-positioning {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 5vh;
  background: lightblue;
}

⚠️ Note: An element with fixed positioning is unaffected by scrolling because its position is relative to the viewport.

4.2 When to Use Fixed Positioning?

Some common cases to use fixed positioning are:

Navigation bar (for example the search bar on any Google search result page)
Important notifications/announcements to draw users’ attentions (for example a version update notification)
Operations to pages (for example the “Back to top” icon)
Table of content (for example any MDN documentation)
Filtering section (for example the filtering section of any AliExpress search result page)

5. Sticky Positioning

🔍 5.1 `position: sticky;`

Sticky positioning allows a positioned element to act like it’s relatively positioned until it’s scrolled to a certain threshold (e.g., 10px from the top of the viewport), after which it becomes fixed.

⚠️ Note: The position of an element with sticky positioning is only fixed within its parent container, and the parent element cannot have overflow: hidden; or overflow: auto;.

<div id="container1" />
<div id="sticky-positioning" />
<div id="container2" />

#container1 {
  width: 100%;
  height: 200px;
  background: lightblue;
}

#sticky-positioning {
  width: 50px;
  height: 50px;
  background: lightgreen;
  position: sticky;
  top: 100px;
  left: 100px;
}

#container2 {
  width: 100%;
  height: 200px;
  background: pink;
}

Since sticky positioning is new than others, its compatibility is also important to consider. You can check Can I use position: sticky? to check the compatibility.