css - Position sticky 在 wordpress(Bridge 主题)中不起作用，但在 codepen 中起作用

Question

我为容器和粘性元素提供了以下 CSS:

.sticky-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.sticky-item {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

我已尝试为容器添加高度，并为这两个元素添加 overflow:visible。在 codepen 中一切都很好，但在我的 WordPress 网站上不起作用。知道为什么吗？

可能值得一提的是在 wordpress css 编辑器中收到一条消息说“预期(静态 | 相对 | 绝对 | 固定)但发现粘性”

Answer 1

正如拉扎尔在评论中所说，可能有很多事情。您是否尝试过在粘性元素上设置 z-index？可能是它正在附加但您看不到它，因为它被具有更高 z-index 的东西隐藏了。

编辑:

您确定您的主题包含主题的 style.css 吗？

例如:

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/style.css">