CSS shorthand for positioning
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