--- order: 6 iframe: true title: zh-CN: 固定头部 en-US: Fixed Header --- ## zh-CN 一般用于固定顶部导航,方便页面切换。 ## en-US Fixed Header is generally used to fix the top navigation to facilitate page switching. ````jsx import { Layout, Menu, Breadcrumb } from 'antd'; const { Header, Content, Footer } = Layout; ReactDOM.render(
nav 1 nav 2 nav 3
Home List App
Content
, mountNode); ```` ````css #components-layout-demo-fixed .logo { width: 120px; height: 31px; background: #333; border-radius: 6px; margin: 16px 24px 16px 0; float: left; } #components-layout-demo-fixed .header { position: fixed; width: 100%; } #components-layout-demo-fixed .content { padding: 0 50px; margin-top: 64px; } ````