先进的粘性定位

Question

先进的粘性定位

htmlcsscss-positionsticky

3

我需要将一些元素固定或粘贴。这是一个 Angular 项目，我已经处理了静态和动态元素。

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

我已经将 sticky position 添加到了 sidebar-menu、header 和 action-panel 中。

但是现在侧边栏的位置不起作用了，并且我在 header 和 action-panel 中有一些问题，如 box-shadow 被隐藏。

最终结果在此

代码及预览在此

- Khujand Nanocoding

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sehjad · Accepted Answer

为了使右侧边栏粘性，请用你的aside标签替换此CSS。

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

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