title: Make React Material-UI Fab Button to stick to a position on the screen
body: <p>I am making a CRUD application with <strong>React</strong> using <strong>Material UI</strong>, and I want the main screen to be a table with the current records, and a <code>Fab</code> button floating on a fixed position 'above' the table. I want this button to remain on the same position when the screen is scrolled.</p>
  
  <p>This is the code of my component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Cookies from 'js-cookie';
  import axios from 'axios';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import Table from '@material-ui/core/Table';
  import TableBody from '@material-ui/core/TableBody';
  import TableCell from '@material-ui/core/TableCell';
  import TableHead from '@material-ui/core/TableHead';
  import TableRow from '@material-ui/core/TableRow';
  import Paper from '@material-ui/core/Paper';
  import Fab from '@material-ui/core/Fab';
  import AddIcon from '@material-ui/icons/Add';
  import Icon from '@material-ui/core/Icon';
  import Album from './Album.js'
  
  const styles = theme =&gt; ({
    root: {
      width: '100%',
      marginTop: theme.spacing.unit * 3,
      overflowX: 'auto',
    },
    table: {
      minWidth: 700,
    },
    fab: {
      margin: theme.spacing.unit,
    },
    extendedIcon: {
      marginRight: theme.spacing.unit,
    },
  });
  
  class AddAlbumFloatingButton extends Component {
    constructor(props) {
      super(props);
  
      const {classes} = props;
    }
  
    render() {
      return(
        &lt;div&gt;
          &lt;Fab color="primary" aria-label="Add" className="classes.fab"&gt;
            &lt;AddIcon /&gt;
          &lt;/Fab&gt;
        &lt;/div&gt;
      )
    }
  }
  
  AddAlbumFloatingButton.propTypes = {
    classes: PropTypes.object.isRequired,
  }
  
  class Albums extends Component {
    constructor(props) {
      ...
    }
  
    getData() {
        ...
    }
  
    callDetail(instance) {
      ...
    }
  
    callList() {
      ...
    }
  
    render() {
      if(this.state.mode === 'table'){
        return (
          &lt;div&gt;
            &lt;AddAlbumFloatingButton /&gt;
            &lt;AlbumsTable classes={this.state.classes} albums={this.albums} onCallDetail={this.callDetail}/&gt;
          &lt;/div&gt;
        );
      } else {
        return (&lt;AlbumDetail instance={this.state.instance} onCallList={this.callList} /&gt;);
      }
  
    }
  }
  
  Albums.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(Albums);
  </code></pre>
  
  <p>With this code, the <code>Fab</code> button scrolls up and down along with the rest of the screen. I tried to set <code>position: 'fixed'</code> on <code>styles.fab</code>, but it didn't work.</p>