javascript - Angular Material 2 - 如何将垫子工具栏和垫子标签锁定到顶部

Question

对于我的 Website我正在尝试将 锁定到屏幕顶部，然后直接在其下方我想锁定 。

我遇到的问题是那个位置:固定在 CSS 中根本没有锁定它，当我实际去网站检查元素时，它放入了一个

我应该如何将这两个元素锁定到顶部，我应该如何绕过这个自动创建的 Div？我之前有一个类似的问题，但我使用固定和绝对定位解决了这个问题，这不适用于这个新版本的 Angular/Angular Material。

Source Code for my Website

最佳答案

您是指粘性工具栏吗？

只需将一个类添加到工具栏并使其具有粘性(使用 position 属性设置为 sticky ):

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
}

---

注意:IE 11 不支持position: sticky。有关浏览器支持position: sticky 的更多信息，请查看这个caniuse页面。

关于javascript - Angular Material 2 - 如何将垫子工具栏和垫子标签锁定到顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47145113/

Answer 1

您是指粘性工具栏吗？

只需将一个类添加到工具栏并使其具有粘性(使用 position 属性设置为 sticky ):

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
}

---

注意:IE 11 不支持position: sticky。有关浏览器支持position: sticky 的更多信息，请查看这个caniuse页面。