选项卡导航栏隐藏其下方的元素

Question

我使用material-ui使用Tab编写导航栏。我的标签导航栏与Master.jsx几乎相同：

import React from 'react';
import {
  AppCanvas,
  IconButton,
  EnhancedButton,
  Mixins,
  Styles,
  Tab,
  Tabs,
  Paper} from 'material-ui';

const {StylePropable} = Mixins;
const {Colors, Spacing, Typography} = Styles;
const ThemeManager = Styles.ThemeManager;
const DefaultRawTheme = Styles.LightRawTheme;


const Master = React.createClass({
  mixins: [StylePropable],

  getInitialState() {
    let muiTheme = ThemeManager.getMuiTheme(DefaultRawTheme);
    // To switch to RTL...
    // muiTheme.isRtl = true;
    return {
      muiTheme,
    };
  },

  propTypes: {
    children: React.PropTypes.node,
    history: React.PropTypes.object,
    location: React.PropTypes.object,
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object,
  },

  getChildContext() {
    return {
      muiTheme: this.state.muiTheme,
    };
  },

  getStyles() {
    let darkWhite = Colors.darkWhite;
    return {
      footer: {
        backgroundColor: Colors.grey900,
        textAlign: 'center',
      },
      a: {
        color: darkWhite,
      },
      p: {
        margin: '0 auto',
        padding: 0,
        color: Colors.lightWhite,
        maxWidth: 335,
      },
      github: {
        position: 'fixed',
        right: Spacing.desktopGutter / 2,
        top: 8,
        zIndex: 5,
        color: 'white',
      },
      iconButton: {
        color: darkWhite,
      },
    };
  },

  componentWillMount() {
    let newMuiTheme = this.state.muiTheme;
    newMuiTheme.inkBar.backgroundColor = Colors.yellow200;
    this.setState({
      muiTheme: newMuiTheme,
      tabIndex: this._getSelectedIndex()});
    let setTabsState = function() {
      this.setState({renderTabs: !(document.body.clientWidth <= 647)});
    }.bind(this);
    setTabsState();
    window.onresize = setTabsState;
  },

  componentWillReceiveProps(nextProps, nextContext) {
    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
    this.setState({
      tabIndex: this._getSelectedIndex(),
      muiTheme: newMuiTheme,
    });
  },

  render() {
    let styles = this.getStyles();

    let githubButton = (
      <IconButton
        iconStyle={styles.iconButton}
        iconClassName="muidocs-icon-custom-github"
        href="https://github.com/callemall/material-ui"
        linkButton={true}
        style={styles.github} />
    );

    let githubButton2 = (
      <IconButton
        iconStyle={styles.iconButton}
        iconClassName="muidocs-icon-custom-github"
        href="https://github.com/callemall/material-ui"
        linkButton={true}/>
    );
    return (
      <AppCanvas>
        {githubButton}
        { this._getTabs() }

        {this.props.children}
      </AppCanvas>
    );
  },

  _getTabs() {
    let styles = {
      root: {
        backgroundColor: Colors.cyan500,
        position: 'fixed',
        height: 64,
        top: 0,
        right: 0,
        zIndex: 1101,
        width: '100%',
      },
      container: {
        position: 'absolute',
        right: (Spacing.desktopGutter / 2) + 48,
        bottom: 0,
      },
      span: {
        color: Colors.white,
        fontWeight: Typography.fontWeightLight,
        left: 45,
        top: 22,
        position: 'absolute',
        fontSize: 26,
      },
      svgLogoContainer: {
        position: 'fixed',
        width: 300,
        left: Spacing.desktopGutter,
      },
      svgLogo: {
        width: 65,
        backgroundColor: Colors.cyan500,
        position: 'absolute',
        top: 20,
      },
      tabs: {
        width: 425,
        bottom: 0,
      },
      tab: {
        height: 64,
      },
    };

    const materialIcon =
      <EnhancedButton
        style={styles.svgLogoContainer}
        linkButton={true}
        href="/#/home">
        <img style={this.prepareStyles(styles.svgLogo)} src="images/material-ui-logo.svg"/>
        <span style={this.prepareStyles(styles.span)}>material ui</span>
      </EnhancedButton>

    return (
      <div>
        <Paper
          zDepth={0}
          rounded={false}
          style={styles.root}>
          {materialIcon}
          <div style={this.prepareStyles(styles.container)}>
            <Tabs
              style={styles.tabs}
              value={this.state.tabIndex}
              onChange={this._handleTabChange}>
              <Tab
                value="1"
                label="GETTING STARTED"
                style={styles.tab}
                route="/get-started" />
              <Tab
                value="2"
                label="CUSTOMIZATION"
                style={styles.tab}
                route="/customization"/>
              <Tab
                value="3"
                label="COMPONENTS"
                style={styles.tab}
                route="/components"/>
            </Tabs>
          </div>
        </Paper>
      </div>
    );
  },

  _getSelectedIndex() {
    return this.props.history.isActive('/get-started') ? '1' :
      this.props.history.isActive('/customization') ? '2' :
        this.props.history.isActive('/components') ? '3' : '0';
  },

  _handleTabChange(value, e, tab) {
    this.props.history.pushState(null, tab.props.route);
    this.setState({tabIndex: this._getSelectedIndex()});
  },
});

export default Master;

我基本上删除了AppBar，AppLeftNav和FullWidthSection。

唯一的问题是Tabs隐藏了它下面的一些元素，请参见下图：

我必须做错事，有什么想法吗？谢谢！

Answer 1

您的根样式已修复。它会使元素粘在顶部。删除它。

Answer 2

好的，我在page-with-nav.jsx中找到了paddingTop: Spacing.desktopKeylineIncrement + 'px',，这是正确的解决方案。

导航选项卡下面的元素被覆盖的原因是因为固定位置元素从文档流中移除而不占用任何空间。所以元素从顶部开始，好像标题不存在一样。您需要做的是使用填充或边距来占用标头占用的空间（如果它在正常流程中）。