April 28, 2019

Learn How to Position Anything

There are five types of positions for HTML elements: static, relative, fixed, absolute, sticky.

Static

The default positoning is static. The elements follow the flow of the page. If I have want to move a div down by 50px from the top and I set styling top: 50px, nothing happens.

The div will always stay at its default position.

<div id="container">
  Container
  <div id="content">
    Content
  </div>
</div>

#content {
  top: 50px;
}

		Container
		
			Content

Relative

If we want to move the element, we need to take it out of the flow of page. One way to do that is to set the position to position: relative. The positioning is relative to its original (static) position, which as we saw above is the top left corner of the parent.

Now if we set position: relative and then top: 50px, the content wrapper will be pushed down 50px from where it originally was positioned.

<div id="container">
  Container
  <div id="content">
    Content
  </div>
</div>

#content {
  position: relative;
  top: 50px;
}

		Container
		
			Content

Absolute

Setting an element to position: absolute also takes it out of the flow of the page. The difference between relative and absolute is what the element is relative to.

An element with position: relative is relative to its static position. However, an element with position: absolute is relative to the nearest positioned ancestor.

When an element is set to position: absolute it will first look at its parent to see if it is positioned, i.e. anything besides static. If the parent doesn’t have a position, then it goes to the parent’s parent. This continues until the absolutely positioned element finds a positioned element to anchor itself to.

If none of its ancestors is positioned, the element will anchor itself to the body.

<div id="container">
  Container
  <div id="content">
    Content
  </div>
</div>

#container {
  position: relative;
}

#content {
  position: absolute;
  top: 50px;
}

		Container
		
			Content

Absolute vs Relative

The content wrapper looks for the closest positioned ancestor, which in this case is its parent, and anchors itself to the parent. You may have noticed that top: 50px looks different between the relatively and absolutely positioned elements.

The content wrapper’s original position is underneath the container’s text so when it is position: relative, the position will be 50px below the text.

However, position: absolute ignores everything in the container. It starts from the absolute top of the parent. This is more visible if we were to set top: 10px.

<div class="container">
  Container
  <div id="relative-content">
    Content - relative
  </div>
</div>

<div class="container">
  Container
  <div class="absolute-content">
    Content - absolute
  </div>
</div>

.container {
  position: relative;
}

#relative-content {
  position: relative;
  top: 10px;
}

#absolute-content {
  position: absolute;
  top: 10px;
}

		Container
		
			Content - relative
		
		Container
		
			Content - absolute

Common uses for absolute positioning

Overlays

Since absolute positioning starts at the absolute left, top, right, and bottom of the parent, it is easy to create overlays.

<div id="content">
  Picture background
  <div id="overlay">Title</div>
</div>

#content {
  position: relative;
  height: 150px;
  width: 200px;
  background-color: skyblue;
}

#overlay {
  position: absolute;
  bottom: 0;
  height: 20%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
}

		Picture background
		Title

Footers

Footers tend to be at the bottom of the page. Absolutely positioned elements find the nearest positioned ancestor to anchor itself to. If none exist, its position will be relative to the body.

Here is a simple way to set up the page layout where the footer will span across the whole page and always stay at the bottom.

<body>
  <header>Header</header>
  <main>Content</main>
  <footer></footer>
</body>

footer {
  width: 100%;
  position: absolute;
  bottom: 0;
}

Fixed

We learned previously that position: relative is relative to an element’s static position. An element with position: fixed is positioned relative to the viewport (the visible area on a user’s screen).

Since elements with position: fixed are anchored to the viewport, they remain in the same position even when scrolling. Regardless of whether they are nested within elements or not, their position always stays the same on the page.

Sticky

Sticky position is a newcomer compared to the rest of the positions and doesn’t full support yet. View browser support for sticky position

The sticky position is a hybrid of position: relative and position: fixed. When the sticky element is visible in the viewport, the element’s position is relative. However, as the user scrolls and the element is no longer visible, its position changes to position: fixed.

When the user is at the top of the page, the sticky element is visible in the viewport, which is why is assumes the relative position. It comes after the text above. Only when user scrolls and the sticky element is no longer in the viewport does its position switch to fixed.

Common uses for fixed and sticky positioning

Navigation

The most popular usage for position: fixed and position: sticky is on headers and footers.

Floating sidebars

Some websites have call-to-action buttons on side to tell you to like, comment, or share the page. Those tend to be floating on the left or right of the page.

Choosing the right position

When choosing the correct position for your layout, decide whether you want the element to be visible when scrolling or not. This will narrow the choices down to two groups: 1) fixed and sticky 2) relative and absolute.

Afterward then choose whichever position from each group fits your needs better.

❮ Previous Post

Next Post ❯