react中的元素总是在页面底部答案

【问题标题】：elements in react are always at the bottom of the pagereact中的元素总是在页面底部
【发布时间】：2022-01-25 13:11:03
【问题描述】：

我正在使用 mern stack 创建一个航空公司预订系统我做了导航栏，一切都很好，但每次我添加一个 div 或一般元素时，它都在页面之外，我必须将其设置为我想要的位置

我希望按钮位于页面中间而不使用样式强制它

编辑 1：这是我的导航栏元素

import React from "react";
import { Component } from 'react';
import './style.css';
import background from "./background.jpg";
import SideBar from "./sidebar";
export default class Navbar extends Component {
  showSettings (event) {
    event.preventDefault();
  }
  render () {
    // NOTE: You also need to provide styles, see https://github.com/negomi/react-burger-menu#styling
    return (
        <div id="App" style = {{ backgroundImage: `url(${background})`, backgroundPosition: 'center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        position:"relative",
        width: '100vw',
        height: '100vh' }}>
        <SideBar pageWrapId={"page-wrap"} outerContainerId={"App"} />
  
        
      </div>
    );
  }
}

【问题讨论】：

与 react 或 mern 无关。这都是 html 和 css。

标签： html css reactjs

【解决方案1】：

尝试将 position 从 relative 更改为 absolute

【讨论】：