Smarter CSS positioning with calc()

Let's talk a specific use case: if you're looking to position something a fixed amount from the bottom edge of an area, you'll end up with something like this:

.foo {
  position: absolute;
  top: 100%;
}

... but if you want the element to be offset a fixed amount from the bottom edge, the standard methodology used to be to just add some margin:

.foo {
  position: absolute;
  top: 100%;
  margin-top: 10px;
}

However, with calc(), you can just throw a fixed amount onto your percentage:

.foo {
  top: calc(100% + 5px)
}

There are countless other uses, but for me that's the one that comes up the most, so there you go. As always, check caniuse.com for browser caveats (you're basically safe everywhere except <IE10).

Tweet