时间戳

首页 > 解决方案 > 使用语义 UI 时，h2 元素在 React 中不可见

javascript - 使用语义 UI 时，h2 元素在 React 中不可见

问题描述

使用语义 UI 时，h2 元素在 React 中不可见

我的反应代码可以在代码沙箱中访问， https: //codesandbox.io/s/suspicious-hill-4f4xr?file=/src/AddContact.js:137-159

我在 App 中嵌入了 2 个组件。第一个是显示字符串“Contact Manager”的标题组件第二个组件是 AddContact，它是一个仅包含 2 个字段的表单：姓名、电子邮件。

现在，有趣的是，AddContact 中的 h2 元素在渲染时是不可见的。

谁能告诉我，为什么 h2 元素被隐藏了？

上面分享的代码沙箱的url，直接游标到h2元素代码。

代码沙箱渲染的react app可以直接从https://4f4xr.csb.app/访问

从我的角度来看，我开始知道，使用 className="ui fixed menu" 是隐藏下面的内容。但是，我不确定，为什么会这样。

谢谢。

在此处输入图像描述

标签： javascriptreactjssemantic-ui

解决方案

固定菜单覆盖 h2 元素。

.ui.menu.fixed {
    position: fixed;
    z-index: 101;
    margin: 0;
    width: 100%;
}

如果将 position:fixed 替换为 position:relative，则 h2 元素应显示在菜单下方。

要解决此问题，您可以在 h2 或持有它的容器上方添加顶部填充，或在必要时添加边距。

推荐阅读