.top-left {
    top: 0;
    left: 0;
}

.top-right {
    top: 0;
    right: 0;
}

.bottom-left {
    bottom: 0;
    left: 0;
}

.bottom-right {
    bottom: 0;
    right: 0;
}


// Cần thay đổi thứ tự lặp: $breakpoint trước, rồi đến position
// để đảm bảo media query có độ ưu tiên (precedence) lớn hơn
// Boostrap 5 đã có? Chưa có kiểu position-xl-static

$positions: static, relative, absolute, fixed, sticky !default;

@each $breakpoint in map-keys($grid-breakpoints) {
    @each $position in $positions {
        @include media-breakpoint-up($breakpoint) {
            $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

            .position#{$infix}-#{$position} {
                position: $position !important;
            }
        }
    }  
}