I find myself using these properties together all the time, which is typically a good opportunity for an abstraction like a mixin:
@mixin coverer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
For example, a full-page overlay:
<div class="overlay"></div>
.overlay {
@include coverer;
background: rgba(black, 0.5);
z-index: 1000;
}
@mixin coverer($top: 0, $left: 0, $width: 100%, $height: 100%)
position: absolute
top: $top
left: $left
width: $width
height: $height