An Overview of CSS Positioning

One of the most important properties in CSS to understand is the position property. While much can be done to layout elements on a page without explicitly changing values for the position property, most advanced layout issues will require knowing the different values available for this property. This blog post will take a look at the four main values for position, and the instances in which you might use each of them.

Position Static

static is the default value of position, meaning that for any element you don’t explictly set any value for position, it will be static by default. Elements with a position of static will not accept any box offset properties, such as margin or padding .

In the example below, each div will be stacked on top of each other, since each is a block-level element:

<div class="container">
    <div class="unit unit-1">Unit 1</div>
    <div class="unit unit-2">Unit 2</div>
    <div class="unit unit-3">Unit 3</div>
    <div class="unit unit-4">Unit 4</div>
</div>

 

body {
  font-family: Helvetica;
  color: white;
}
.container {
  background-color: #fffbed;
}
.unit {
  background-color: #337e7e;
  height: 80px;
  width: 80px;
  text-align: center;
  line-height: 80px;
  border: #696969 2px solid;
}

 

CSS Positioning

Position Relative

Elements with a position of relative are very similar to the value of static, although with one major difference: they can accept box offset properties of top, right, bottom, and left.

In the case of an element with a position of relative, these offset properties set the distance from the elements normal position. In other words, if you were to set an element with a position of relative to have a top value of 10px, the element would appear 10px lower than where it would normally appear if its position were static.

Elements with a position of relative stay within the normal “flow” of elements, the box offset properties simply shifting the elements from its normal flow:

<div class="container">
    <div class="unit unit-1">Unit 1</div>
    <div class="unit unit-2">Unit 2</div>
    <div class="unit unit-3">Unit 3</div>
    <div class="unit unit-4">Unit 4</div>
</div>

 

body {
  font-family: Helvetica;
  color: white;
}
.container {
  background-color: #fffbed;
}
.unit {
  background-color: #337e7e;
  height: 80px;
  width: 80px;
  text-align: center;
  line-height: 80px;
  border: #696969 2px solid;
  position: relative;
}
.unit-1 {
  top: 10px;
}
.unit-2 {
  right: 30px;
}
.unit-3 {
  left: 20px;
}
.unit-4 {
  bottom: -30px;
  right: 40px;
}

 

An Overview of CSS Positioning

Position Absolute

Elements with a position of absolute also accept box offset properties, although they are removed from the normal flow of elements. Using box offset properties on an absolute positioned element will position that element in direct relation to its parent element.

Taking the exact same CSS as the position: relative; example above, but simply changing the position to absolute will result in entirely different positioning of the individual elements:

<div class="container">
    <div class="unit unit-1">Unit 1</div>
    <div class="unit unit-2">Unit 2</div>
    <div class="unit unit-3">Unit 3</div>
    <div class="unit unit-4">Unit 4</div>
</div>

 

body {
  font-family: Helvetica;
  color: white;
}
.container {
  background-color: #fffbed;
}
.unit {
  background-color: #337e7e;
  height: 80px;
  width: 80px;
  text-align: center;
  line-height: 80px;
  border: #696969 2px solid;
  position: absolute;
}
.unit-1 {
  top: 10px;
}
.unit-2 {
  right: 30px;
}
.unit-3 {
  left: 20px;
}
.unit-4 {
  bottom: -30px;
  right: 40px;
}

 

CSS Positioning

Position Fixed

An element with a position of fixed is very similar to position: relative;, although the position is relative to the browser viewport, rather than any parent element. Additionally, the element will not scroll with the page, remaining “fixed” and always visible, regardless of where the user is at on the page. This is often used to “fix” headers and footers to the page, in order to always remain visible.

Resources

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC