css - Ant 设计中的卡片漂浮在固定的导航栏上

Question

我使用 ant design 制作了一个单页应用程序。我固定了顶部的导航栏，现在滚动时内容中的卡片会 float 在导航栏上。

顶部菜单/导航栏代码

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> 
)
}
}

在标题中我声明位置是固定的。 内容代码:

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;

内容中的卡片 float 在固定标题上方，而内容本身位于标题下方。

我希望导航栏位于其他所有内容之上。我能做些什么。

Answer 1

May z-index 会在您的情况下为您提供帮助。

<Header style={{position: 'fixed', width: '100%', zIndex: 100}}>