先进的粘性定位

Question

我需要将一些元素固定或固定。它是一个 angular 项目，我已经管理了静态和动态元素。

左侧菜单是静态的，主要内容是动态的。主要内容有自己的顶部菜单、内容和页脚。

我已将置顶位置添加到 sidebar-menu、header、action-panel。

但是现在侧边栏位置不起作用，我在 header 和 action-panel 上遇到了一些问题，例如 box-shadow 隐藏；

here final result

here code with result preview

Answer 1

要使右侧边栏具有粘性，请将此 CSS 替换为您的旁边标签。

aside {
    flex: 1 1;
    display: block;
}

.content header {
    height: 70px;
    width: 100%;
    position: sticky;
    top: 0px;
    background: #fff;
    margin-bottom: 10px;
}

先进的粘性定位

advanced sticky positioning

html

css

css-position

sticky