为什么链接组件在 Chrome 上呈现在页面之外，而在 Firefox 上却可以？

Question

我的 React Web 应用程序中有一些链接组件，只有当用户将鼠标悬停在网页上的某个元素上时才会显示这些组件。 该网站 ( sepsol.github.io ) 在 Firefox 上加载良好，但是当我尝试在 Chrome 上加载它时，我看不到我的链接组件。 我检查了页面，如果你仔细观察，你会发现元素在页面之外。

这是行动中的问题：

左：铬 | 右：火狐

——

反应代码：

我不知道问题出在哪里，所以我无法在这里放置任何特定的代码片段。 我将链接我的整个 React 存储库： https : //github.com/sepsol/sepsol.github.io/tree/react-code

Answer 1

这些链接周围的容器是绝对定位的，并且正在寻找最近的父级来定位自己。 Firefox 使用隐式父规则为您提供您想要的结果，而 Chrome 需要显式定义父规则。 您需要的是将work-card-container声明为父级。 然后，链接容器的绝对定位将在这个新定义的父级的边界内。

添加以下内容：

.work-card-container {
  position: relative;
}