You can't change the `top` property of a stuck element later in the cascade

[JacobDB]

I'm trying to implement a sticky navigation that gets stuck below the WordPress admin bar, rather than appearing underneath it. The solution to this is simple:

.navigation_container.-sticky {
    position: sticky;
    top: 0;
    width: 100% !important; // polyfill miscalculates, should always be 100%
}

@media screen and (min-width: 601px) {
    .admin-bar .navigation_container.-sticky {
        top: 46px;
    }
}

@media screen and (min-width: 783px) {
    .admin-bar .navigation_container.-sticky {
        top: 32px;
    }
}

Unfortunately, this doesn't appear to work. It always thinks top:0; is what should be set. I'm not sure if this is due to the added .admin-bar class, making it think that it's an entirely different stuck element, or if it's simply that I'm trying to change the top property at all.

In this use case, where I just want it to be stuck to the top of the body element, it doesn't make sense to add an inline style for top at all, preferably there should be a way to override that.