如何防止HTML元素在反应中的标题下面

Question

我的标题包含按钮Profile，Train AI，Matches，Chat Icon，您可以在上面的示例中看到我的Name 1元素＆amp;其他人都在标题之下。我标题的CSS是：

<Header
        style={{
            background: colorTheme.text8Color,
            position: 'fixed',
            zIndex: 1, // make every display under the header
            width: '100%'
        }}
    >
        {this.renderHeaderButtons()}
    </Header>

我该怎么做才能阻止任何事情进入标题？