ReactJS UI Toolbar Not Displaying for Tabs

Question

A small ink bottle will not appear under this tab for some reason, it could be a css thing, but I couldn’t understand it, maybe something that I don’t know is missing, I pulled my hair, but I think the height Tabs May Be Too High? I am not sure honestly and was looking for some help.

_getTabs() {


  let styles = {
      root: {
        backgroundColor: '#333',
        position: 'fixed',
        height: 64,
        top: 0,
        right: 0,
        zIndex: 0,
        width: '100%',
      },
      container: {
        position: 'absolute',
        right: (Spacing.desktopGutter/2) + 48,
        bottom: 0,
      },
      span: {
        color: white,
        left: 65,
        top: 18,
        position: 'absolute',
        fontSize: 26,
      },
      svgLogoContainer: {
        position: 'fixed',
        width: 300,
        left: Spacing.desktopGutter,
      },
      svgLogo: {
        width: 65,
        height: 65,
        backgroundColor: '#333',
        position: 'absolute',
        top: 0,
      },
      tabs: {
        width: 600,
        bottom:0,
        height: 64
      },
      tab: {
        height: 64,
        backgroundColor: '#333'
      },

    };
    let renderedResult;
    let loggedIn = false
    let materialIcon = this.state.tabIndex !== '0' ? (
     <EnhancedButton
        style={styles.svgLogoContainer}
        href="/">
        <span style={styles.span}>MobaRedux</span>
      </EnhancedButton>) : null;

    if (loggedIn) {
    renderedResult = (

        <Paper zDepth={0}
             rounded={false}
             style={styles.root}
        >

      {materialIcon}

          <div style={styles.container}>
            <Tabs
              style={styles.tabs}
              value={this.state.tabIndex}
              onChange={this._handleTabChange}
              inkBarStyle={{backgroundColor:"#FFC107"}}>
              <Tab
                value="8"
                label="DASHBOARD"
                style={styles.tab}/>
                <Tab
                value="5"
                label="ABOUT"
                style={styles.tab} />
            </Tabs>


          </div>

        </Paper>


    );
}

else {
  renderedResult = (

        <Paper zDepth={0}
             rounded={false}
             style={styles.root}
        >

            {materialIcon}

          <div style={styles.container}>
            <Tabs
              style={styles.tabs}
              value={this.state.tabIndex}
              onChange={this._handleTabChange}
              inkBarStyle={{backgroundColor:"#FFC107"}}>
              <Tab
                value="8"
                label="DASHBOARD"
                style={styles.tab}
                 />
                <Tab
                value="5"
                label="ABOUT"
                style={styles.tab}
                />
            </Tabs>


          </div>

        </Paper>

    );
}
return (
      <div>
        {renderedResult}
      </div>

    );
}

The blue tabs below are just a check that the tabs are working at all

Answer 1

I was able to fix this by changing the z-index styles.root. You should not use z-index: 0 at position: a fixed element, because it just simply disappears under other elements.

      root: {
    backgroundColor: '#333',
    position: 'fixed',
    height: 64,
    top: 0,
    right: 0,
    zIndex: 1000, // Here is what i've changed to get it fixed
    width: '100%',
  },