CSS shorthand for positioning

The answer is no as they are different properties so can not be combined. You can however consolidate your css a little bit rather than repeating certain properties, e.g:

#topDiv,
#centerDiv,
#consoleDiv {
    position:absolute;
    left:0;
    right:0;
}
#topDiv {
    top:0;
    height:100px;
}
#centerDiv {
    top:100px;
    bottom:120px;
}
#consoleDiv {
    bottom:0;
    height:120px;
}

2021 Update: The inset property is currently gaining adoption. This property uses the same multi-value syntax as the shorthand margin property. For browser compatibility, please see MDN.


No short-hand exists to combine all of these values. These are all different properties, unlike, for instance background, which has colors, images, positions and repeat instructions and as such can be coalesced into a short-hand form.

If you really wanted this type of control, you could use something like SASS and create a mixin.


I just found this, was looking for the same, I ended up using sass for top, bottom, left, right

here is my solution

@mixin position($top, $right: $top, $bottom: $top, $left: $right) {
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
 }

works like most css shorthands

@include position(5) // all 4

@include position(5,4) // vertical, horizontal

@include position(5,4,3) // top, horizontal, bottom

@include position(5,4,3,2) // top, right, bottom, left


inset is what you can use in 2020 as positioning shorthand, but you need to use PostCSS and this plugin https://github.com/jonathantneal/postcss-inset

Example:

.example {
  inset: 10px 20px 80px;
}

/* becomes */

.example {
  top: 10px;
  right: 20px;
  bottom: 80px;
  left: 20px;
}

More info and spec here: https://www.w3.org/TR/css-logical-1/#propdef-inset