CSS Positioning

Position property

Positioning allows you to control the layout of a page using the position property. Positioning allows you to establish elements independent of the normal flow. By default, all elements have a position: static CSS property which gives them their normal flow. Other position properties include: relative, absolute, and fixed, and are applied along with top, left, right, or bottom properties to shift elements along the X/Y axis. Note: postioning has nothing to do with alignment — rather, it is often used to mis-align or disrupt the normal behavior of aligned elements. Use techniques described in Layouts and the Box Model to control your alignments and whitespace overall structure.

Relative Positioning

This offsets an element from the position it would be in normal flow, shifting it to the top, right, bottom, or left of where it would have been placed. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.

<div>...</div>
<div class="example">...</div>
<div>...</div>											
							
							

.example {
  background: blue;
  position: relative; 
  top: -15px;
  left: 100px;
}							
							

Absolute Positioning

The element’s box is completely removed from the flow of the document and positioned with respect to its containing block, which may be another element in the document or the initial containing block. Whatever space the element might have occupied in the normal document flow is closed up, as though the element did not exist.

<section class="container">
	<div>...</div>
	<div class="example">...</div>
	<div>...</div>
</div>											
							
							

.container{
	position: relative;
	border: 1px solid red;
}								
.example {
  background: red;
  position: absolute; 
  top: 0; 
  right: 0;
  width: 60%;
}						

The Container

When positioning elements, the containing block / parent is your positioning context or reference point. (Elements can be visually positioned outside of their containing block but still operate with the same parent-child relationship.)

For relatively positioned elements, the reference point is the position the block would take if it were not moved.

For absolutely positioned elements the containing block is set to the nearest ancestor (any containing element, not necessarily the container directly above it) that has a position value other than the default static, i.e. relative or absolute or fixed. For this reason, we often set the container to which we want the absolutely positioned element to refer to as position: relative, without setting top or left values. We aren’t offsetting the container, but simply specifying the context for the absolutely positioned element it contains.

Fixed positioning

The element’s box behaves as though it were set to absolute, but its containing block is the viewport. Viewport refers to the boundaries of browser window. This means that fixed position elements don’t move when the page is scrolled, because it is always relative to the current window.

	<div class="square">...</div>							
							
							

	.square{
	  width: 80px;
	  height: 80px;
	  background: yellow;
	  position: fixed;
	  top: 0;
	  right: 0;
	}
	

Z-index

The z-index value specifies the stack order of an element for any non-standard positioned elements. This is similar to how layers work in Photoshop. An element with a bigger number is always in front of an element with a smaller number. The default is 0. We often use intervals of 10 in case additional elements need to be placed in between.

Overflow

Overflow property accounts for what happens when your content doesn’t fit within the container. By default auto will add a scroll bar if the content exceeds the width / height of its container. Use overflow: hidden to crop or hide the overflowing contents.

<section class="container">
  <div class="line">...</div>
  <div class="line">...</div>
  <div class="line">...</div>
</section>								
							
							

.container {
  overflow: hidden; 
  height: 80px;
}
.line {
  height: 1.5em;
  background: #e6e6e6;
  margin-bottom: .5em;
}			

Positioning Properties Summary

Position property adjusts the regular flow of HTML by horizontal or vertical units, relative to top / left / right / bottom properties that are additionally declared.

Caution!

Exercise restraint when using positioning properties. It is easy to use absolute positioning to reach pixel perfection—only to realize that on different screen sizes or viewports, the layout looks askew. Always use the underlying flow of the content, and be explicit with your reference points.