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