ReactJS - How To Setup 3 Divs One On-Top Of The Other?

Question

Disclaimer:

• I'm new to ReactJS, and web-development as a whole. Did my best to research before, and did not find an answer.
• I'm probably missing something simple, but can't figure it out - so sorry if this question's answer is a one liner "How-Did-I-Miss-That' sort of answer.
• Feel free to comment/answer with best practices I missed, or things I can improve in this question.
• Thanks is advance to anybody that reads this!

My Own Research:

1. Float 3 Divs - I did not need the z-axis property, as non of my divs are on top of the other.
2. 3 Divs LTR - Talks about 3 divs aligned horizontally, not vertically. The same method did not work for me in the vertical axis.
3. 3 Divs LTR #2 - This talks about flex, so I tried it too. In the right direction, but not enough.
4. Vertical Align etc - could not make it happen with this solution either.
5. (5... 1000) A bunch of other first-second-third results in Google search queries like: "ReactJS vertical 3 divs" and the likes.

Actual Question:

Trying to make a basic outline of a mockup web-page, which consists of 3 divs:

1. Header Div - In The Top, Not Sticky (=when you y axis scroll, it does not appear).
2. Content Div - In The Middle, Y/X Axis Scrollable.
3. Bottom Nav Div - In The Bottom, Sticky.

Mockup:

My Current Status:

• Can't make my bottom-menu div to appear. it's stuck under the frame.
• Can't be sure my bottom-menu div is actually sticky because of the point above.
• The contents tab div has no margin from the Header div, which makes the upper end of the text in it - unreadble.

My Code:

Did a lot of back-and-fourth on this, and this is the closest version I have for this simple (yet - not working!) task:

App.jsx

import React from "react";
import BottomMenu from "../BottomMenu/BottomMenu";
import Header from "../Header/Header";
import ContentTab from "../ContentTab/ContentTab";

const App = () => {
  return (
    <div style = {{display: "flex", flexDirection: "column", overflow: "visible",
    direction: "rtl"}}>
      <Header/>
      <ContentTab />
      <BottomMenu />
    </div>
  );
};

export default App;

Header.jsx

import React from "react";
import { Toolbar, AppBar } from "@material-ui/core";
import Typography from '@material-ui/core/Typography';

const Header = props => {

  return (
        <div>
          <AppBar color="primary" style={{alignItems: 'center'}}>
            <Toolbar>
              <Typography>
                Test
              </Typography>
            </Toolbar>
          </AppBar>
        </div>
  );
};

export default Header;

ContentTab.jsx

import React from "react";
import Typography from "@material-ui/core/Typography";
import Paper from "@material-ui/core/Paper";

const ContentTab = (props) => {
    return (
        <div style={{height: "80%", width: "100%"}}>
            <Paper align="center" elevation={3}>
                <Typography paragraph>First</Typography>
                <Typography paragraph>TextTab</Typography>
                <Typography paragraph>Last</Typography>
            </Paper>
        </div>
    );
};

export default ContentTab;

BottomMenu.jsx

import React from "react";
import BottomNavigation from "@material-ui/core/BottomNavigation";
import BottomNavigationAction from "@material-ui/core/BottomNavigationAction";
import RestoreIcon from "@material-ui/icons/Restore";
import FavoriteIcon from "@material-ui/icons/Favorite";
import LocationOnIcon from "@material-ui/icons/LocationOn";
import { Toolbar, AppBar } from "@material-ui/core";

export default function BottomMenu() {
    const [value, setValue] = React.useState(0);

    return (
        <div style={{
            position: "fixed", bottom: "0", width: "100%", height: "10%"}}>
            <AppBar
                style={{ background: '#FFFFFF', alignItems: "center" }}
            >
                <Toolbar>
                    <BottomNavigation
                        value={value}
                        onChange={(event, newValue) => {
                            setValue(newValue);
                        }}
                        showLabels
                    >
                        <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
                        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
                        <BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
                    </BottomNavigation>
                </Toolbar>
            </AppBar>
        </div>
    );
}

Answer 1

Actually; the issue is that you're using the Material-UI component AppBar. If this were just a regular DIV tag then you could position it the way you want. To use the AppBar component and make it do what you what then this should do the trick:

• remove the outer DIV on the BottomMenu component
• style the BottomMenu component's appBar with top of auto and bottom of 0 and give it a position property of fixed.
• additionally, style the Header component's appBar with position of static.

this:
in BottomMenu:

<AppBar
      position="fixed"
      style={{
        top: "auto",
        bottom: "0",
        background: "#FFFFFF",
        alignItems: "center"
      }}
    >

in Header:

  <AppBar
    position="static"
    color="primary"
    style={{ alignItems: "center" }}
  >

Here's a link to the docs that show it doing what you want: https://material-ui.com/components/app-bar/

and here's a link to a code sandbox with your code. https://codesandbox.io/s/material-ui-with-bottom-appbar-ugk31

In general, what I've found with Material-UI is that some of their components have positioning logic built into them and you need to use their properties for positioning instead of trying to do it with CSS.