cards in ant design for are floating over fixed nav bar - css

Question

I made a single page app in react using ant design. I made the navbar on top fixed, now when scrolling the cards in the content are floating over the navbar.
Top menu/navbar code
import React,{Component} from 'react'
import {Layout, Menu, Row, Col, Icon} from 'antd'
import Logo from './Glogo.png'
const {Header}=Layout
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
export default class TopMenu extends Component{
render(){
return(
<Header style={{position: 'fixed', width: '100%' }}>
<img src={Logo} style={{height:"40px", width:"140px",
float:"left", marginTop:"10px"}}alt="Logo"/>
<Menu
theme="dark"
mode="horizontal"
style={{ lineHeight: '64px' }}
>
</Menu>
</Header>
)
}
}
In header i declared the position as fixed.
Content code:
import React, {Component} from 'react';
import {Layout, Card, Row, Col, List} from 'antd';
const {Content} = Layout;
class Dashboard extends Component{
constructor(props){
super();
this.state={
session_id:[
{
event:"underline",
timestamp:"10:30",
observation:["magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule","magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
{
event:"underline",
time:"10:30",
observation:["magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
{
event:"underline",
time:"10:30",
observation:["magnetic effect","flemings right hand rule"],
suggestions:["take a look at this concept", " watch this video"]
},
]
}
}
render(){
return(
<Content style={{ padding: '0 50px', marginTop: 64, minHeight: "calc(100vh - 128px)" }}>
<div style={{ background: '#fff', padding: 24, minHeight: 500, marginBottom:"30px" }}>
{this.state.session_id.map((val, i)=>
<Card key={i}hoverable style={{margin:"15px", boxShadow:"0 0 10px gray "}}>
<Row gutter={16}>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Event" hoverable bordered={false}>
Name: {val.event}<br/>Time: {val.time}
</Card>
</Col>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Observation" hoverable bordered={false}>
<List
size="small"
bordered
dataSource={val.observation}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</Card>
</Col>
<Col xs={24} sm={24} md={8} lg={8} >
<Card title="Suggestions" hoverable bordered={false}>
<List
size="small"
bordered
dataSource={val.suggestions}
renderItem={item => (<List.Item>{item}</List.Item>)}
/>
</Card>
</Col>
</Row>
</Card>)}
</div>
</Content>
)
}
}
export default Dashboard;
The cards in the content are floating over the fixed header while the content itself is below the header.
I want the navbar to be on top of everthing else. What can i do.

Answer 1

May z-index will help you in your case.
<Header style={{position: 'fixed', width: '100%', zIndex: 100}}>