Html ReactJS-如何设置3个div，一个在另一个之上？_Html_Css_Reactjs_Material Ui

Html ReactJS-如何设置3个div，一个在另一个之上？

html css reactjs material-ui

Html ReactJS-如何设置3个div，一个在另一个之上？,html,css,reactjs,material-ui,Html,Css,Reactjs,Material Ui,免责声明：我不熟悉ReactJS，也不熟悉整个web开发。之前我尽了最大努力进行研究，但没有找到答案我可能遗漏了一些简单的问题，但我想不出来——如果这个问题的答案是一行“How-Did-I-Miss-That”之类的答案，那么很抱歉请随意评论/回答我错过的最佳实践，或者我可以在这个问题上改进的地方感谢所有读过这篇文章的人我自己的研究： -我不需要z轴属性，因为我的divs中的一个不在另一个之上 -谈到3个div水平对齐，而不是垂直对齐。相同的方法在垂直轴上不适用于我 -这是关于fl

免责声明：

我不熟悉
```
ReactJS
```
，也不熟悉整个web开发。之前我尽了最大努力进行研究，但没有找到答案
我可能遗漏了一些简单的问题，但我想不出来——如果这个问题的答案是一行“How-Did-I-Miss-That”之类的答案，那么很抱歉
请随意评论/回答我错过的最佳实践，或者我可以在这个问题上改进的地方
感谢所有读过这篇文章的人

我自己的研究：

-我不需要z轴属性，因为我的

div

s中的一个不在另一个之上

-谈到3个div水平对齐，而不是垂直对齐。相同的方法在垂直轴上不适用于我

-这是关于flex的，所以我也尝试了。方向正确，但还不够

-使用此解决方案也无法实现

（5…1000）谷歌搜索查询中的其他一、二、三级搜索结果，如：“ReactJS vertical 3 divs”等

实际问题：

尝试制作一个模型网页的基本轮廓，该网页由3个

div

s组成：

标题Div-在顶部，不粘滞（=当y轴滚动时，它不会出现）

>强>内容div/<强>中，y/x轴可滚动。

底部导航Div-底部有粘性

模型：

我的当前状态：

无法显示我的底部菜单
```
div
```
。它卡在框架下
由于上面的原因，我无法确定我的底部菜单
```
div
```
是否真的有粘性
目录选项卡
```
div
```
与标题
```
div
```
之间没有边距，这使得其中文本的上端无法读取

我的代码：

在这个问题上做了大量的重复和第四次，这是我对这个简单（但-不起作用！）任务的最接近的版本：

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;

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;

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;

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>
    );
}

从“React”导入React；
从“./BottomMenu/BottomMenu”导入BottomMenu；
从“./页眉/页眉”导入页眉；
从“./ContentTab/ContentTab”导入ContentTab；
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

Header.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;

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;

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;

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>
    );
}

从“React”导入React；
从“@material ui/core”导入{Toolbar，AppBar}”；
从“@material ui/core/Typography”导入排版；
const Header=props=>{
返回(
试验
);
};
导出默认标题；

ContentTab.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;

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;

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;

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>
    );
}

从“React”导入React；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Paper”导入纸张；
const ContentTab=（道具）=>{
返回(
弗斯特
文本选项卡
最后
);
};
导出默认内容选项卡；

BottomMenu.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;

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;

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;

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>
    );
}

从“React”导入React；
从“@material ui/core/BottomNavigation”导入BottomNavigation；
从“@material ui/core/BottomNavigationAction”导入BottomNavigationAction；
从“@material ui/icons/Restore”导入restoreCON；
从“@material ui/icons/Favorite”导入收藏夹图标；
从“@material ui/icons/LocationOn”导入LocationOnIcon；
从“@material ui/core”导入{Toolbar，AppBar}”；
导出默认函数底部菜单（）{
const[value，setValue]=React.useState（0）；
返回(
{
设置值（新值）；
}}
展示标签
>
);
}

事实上，问题在于您使用的是Material UI组件AppBar。如果这只是一个常规的DIV标记，那么您可以按您想要的方式定位它。要使用AppBar组件并使其按您的方式运行，那么这应该可以做到：

移除底部菜单组件上的外部DIV
为BottomMenu组件的appBar设置样式，顶部为auto，底部为0，并将position属性设置为fixed
此外，使用static的位置设置标题组件的appBar的样式

这个：
在底部菜单中：

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


这里有一个链接，指向包含代码的代码沙箱。

总的来说，我发现Material UI的一些组件内置了定位逻辑，您需要使用它们的属性进行定位，而不是尝试使用CSS进行定位。
感谢您指出这一点！设法使其具有粘性。：）您的答案中唯一缺少的是我提到的第三点-如何o使内容标签在中间，因此文本的上下部分不会被隐藏……最初没有注意到，它是另一个应用程序条。它需要位置=“静态”。请编辑答案。非常感谢您的帮助！