How to keep uikit.sticky stay on top

Question

I tried to follow the main web getuikit > component > sticky, but problems when scroll down sticky is work, such as ".uk-panel" css class, it seems to be on top of ".uk-stick".

I need to fix.

Describe the problem with images

<nav className="uk-navbar" data-uk-sticky="{top:-100, animation: 'uk-animation-slide-top'}" >
                <Link to="/" className="uk-navbar-brand">
                    <i className="uk-icon-hover uk-icon-graduation-cap"></i>
                </Link>
                <div className="uk-navbar-flip">
                    <ul className="uk-navbar-nav">
                        <li>
                            <Link to="/register" className="uk-button">Register</Link>
                        </li>
                        <li>
                            <Link to="/signin" className="uk-button">SignIn</Link>
                        </li>
                    </ul>
                </div>
            </nav>
            <div  className="uk-container uk-container-center" style={height:3000px;}>
                <div class="uk-panel uk-panel-box uk-panel-box-primary">
                            <h3 class="uk-panel-title">Box primary</h3>
                            Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit.
                        </div>

                        <div class="uk-panel uk-panel-box uk-panel-box-secondary">
                            <h3 class="uk-panel-title">Box secondary</h3>
                            Lorem ipsum <a href="#">dolor</a> sit amet, consectetur adipisicing elit.
                        </div>
            </div>

Answer 1

Try:

nav {
z-index:999;
}

Eventually add:

.uk-panel {
z-index: 100; //or something less
}