css - 如何让 uikit.sticky 保持领先

Question

我尝试关注主网络getuikit > component > sticky，但是当向下滚动粘滞时出现问题，例如“.uk-panel”css 类，它似乎在“.uk-stick”之上。

我需要修复。

用图片描述问题

<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

尝试：

nav {
z-index:999;
}

最后补充：

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