CSS shorthand for positioning
CssCss PositionCss Problem Overview
There are any shorthand for top
right
bottom
left
or for width
and height
?
I have a lot of css like this
#topDiv {
position:absolute;
top:0px;
left:0px;
right:0px;
height:100px;
}
#centerDiv {
position:absolute;
top:100px;
bottom:120px;
left:0px;
right:0px;
}
#consoleDiv {
position:absolute;
left:0px;
right:0px;
bottom:0px;
height:120px;
}
I would like to do anything like this
position: absolute 10px 50px 50px 100px;
or
size: 400px 200px;
Css Solutions
Solution 1 - Css
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.
Solution 2 - Css
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
Solution 3 - Css
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;
}
Solution 4 - Css
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
Solution 5 - Css
you can use inset: top right bottom left;.
#topDiv {
position: absolute;
inset: 0;
min-height: 100px;
}
#centerDiv {
position: absolute;
inset: 100px 0 120px;
}
#consoleDiv {
position: absolute;
inset: auto 0 0 0;
}
Solution 6 - Css
If you want shorthand for this, you're gonna need to make what's called a mixin with Sass. Don't know what it is? Look it up!
@mixin position($position, $args) {
@each $o in top right bottom left {
$i: index($args, $o);
@if $i and $i + 1< = length($args) and type-of(nth($args, $i + 1)) == number {
#{$o}: nth($args, $i + 1);
}
}
position: $position;
}
@mixin absolute($args) {
@include position("absolute", $args);
}
@mixin fixed($args) {
@include position("fixed", $args);
}
@mixin relative($args) {
@include position("relative", $args);
}
Here's a link that explains it:
Solution 7 - Css
It is better to use Inset link to inset MDN page here