javascript - Components overlapping each other in React - Stack Overflow

admin管理员组

文章数量:1295874

I am rendering 2 ponents in my React application, which should show one after the other on the screen. But they are overlapping. Also the layout is also not how I expected it to be, see photo of error. I am not able to figure out the cause. Link to actual project:

Here is my main ponent App.js which renders Navbar, Login and Register ponents as per the route.

import React, { Fragment } from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./ponents/layout/Navbar";
import Landing from "./ponents/layout/Landing";
import Login from "./ponents/auth/Login";
import Register from "./ponents/auth/Register";

const App = () => (
<Router>
<Fragment>
  <Navbar />

  <Switch>
    <Route exact path="/" ponent={Landing} />
    <Route exact path="/login" ponent={Login} />
    <Route exact path="/register" ponent={Register} />
  </Switch>
</Fragment>
</Router>
);

export default App;

Register.js:

import React, { Fragment } from "react";
import { Link } from "react-router-dom";
const Register = () => {
return (
<Fragment>
  <h1 className="large text-primary">Sign Up</h1>
  <p className="lead">
    <i className="fas fa-user"></i> Create Your Account
  </p>
  <form className="form" action="create-profile.html">
    <div className="form-group">
      <input type="text" placeholder="Name" name="name" required />
    </div>
    <div className="form-group">
      <input type="email" placeholder="Email Address" name="email" />
      <small className="form-text">
        This site uses Gravatar so if you want a profile image, use a
        Gravatar email
      </small>
    </div>
    <div className="form-group">
      <input
        type="password"
        placeholder="Password"
        name="password"
        minLength="6"
      />
    </div>
    <div className="form-group">
      <input
        type="password"
        placeholder="Confirm Password"
        name="password2"
        minLength="6"
      />
    </div>
    <input type="submit" className="btn btn-primary" value="Register" />
  </form>
  <p className="my-1">
    Already have an account? <Link to="/login">Sign In</Link>
  </p>
</Fragment>
);
};
export default Register;

Login.js

import React from "react";

const Login = () => {
return (
<div>
  <b>Login</b>
</div>
);
};
export default Login;

Main CSS file App.css

/* Global Styles */
:root {
--primary-color: #17a2b8;
--dark-color: #343a40;
--light-color: #f4f4f4;
--danger-color: #dc3545;
--success-color: #28a745;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: "Raleway", sans-serif;
font-size: 1rem;
line-height: 1.6;
background-color: #fff;
color: #333;
}

a {
color: var(--primary-color);
text-decoration: none;
}

ul {
list-style: none;
}

img {
width: 100%;
}

/* Utilities */
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
padding: 0 2rem;
margin-top: 6rem;
margin-bottom: 3rem;
}

/* Text Styles*/
.x-large {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 1rem;
}

.large {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1rem;
}

.lead {
font-size: 1.5rem;
margin-bottom: 1rem;
}

.text-center {
text-align: center; 
}

.text-primary {
color: var(--primary-color);
}

.text-dark {
color: var(--dark-color);
}

/* Padding */
.p {
padding: 0.5rem;
}
.p-1 {
padding: 1rem;
}
.p-2 {
padding: 2rem; 
}
.p-3 {
padding: 3rem;
}
.py {
padding: 0.5rem 0;
}
.py-1 {
padding: 1rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}

/* Margin */
.m {
margin: 0.5rem; 
}
.m-1 {
margin: 1rem;
}
.m-2 {
margin: 2rem;
}
.m-3 {
margin: 3rem;
}
.my {
margin: 0.5rem 0;
}
.my-1 {
margin: 1rem 0;
}
.my-2 {
margin: 2rem 0;
}
.my-3 {
margin: 3rem 0;
}

.btn {
display: inline-block;
background: var(--light-color);
color: #333;
padding: 0.4rem 1.3rem;
font-size: 1rem;
border: none;
cursor: pointer;
margin-right: 0.5rem;
transition: opacity 0.2s ease-in;
outline: none;
}

.badge {
font-size: 0.8rem;
padding: 0.1rem;
text-align: center;
margin: 0.3rem;
background: var(--light-color);
color: #333;
}

.alert {
padding: 0.8rem;
margin: 1rem 0;
opacity: 0.9;
background: var(--light-color);
color: #333;
}

.btn-primary,
.bg-primary,
.badge-primary,
.alert-primary {
background: var(--primary-color);
color: #fff;
}

.btn-light,
.bg-light,
.badge-light,
.alert-light {
background: var(--light-color);
color: #333;
}

.btn-dark,
.bg-dark,
.badge-dark,
.alert-dark {
background: var(--dark-color);
color: #fff;
}

.btn-danger,
.bg-danger,
.badge-danger,
.alert-danger {
background: var(--danger-color);
color: #fff;
}

.btn-success,
.bg-success,
.badge-success,
.alert-success {
background: var(--success-color);
color: #fff;
}

.btn-white,
.bg-white,
.badge-white,
.alert-white {
background: #fff;
color: #333;
border: #ccc solid 1px;  
}

.btn:hover {
opacity: 0.8;
}

.bg-light,
.badge-light {
border: #ccc solid 1px;
}

.round-img {
border-radius: 50%;
}

.line {
height: 1px;
background: #ccc;
margin: 1.5rem 0;
}

/* Overlay */
.dark-overlay {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Forms */
.form .form-group {
margin: 1.2rem 0;
}

.form .form-text {
display: block;
margin-top: 0.3rem;
color: #888;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="date"],
.form select,
.form textarea {
display: block;
width: 100%;
padding: 0.4rem;
font-size: 1.2rem;
border: 1px solid #ccc;
}

.form input[type="submit"],
button {
font: inherit;
}

.form .social-input {
display: flex; 
}

.form .social-input i {
padding: 0.5rem;
width: 4rem;
}

.form .social-input i.fa-twitter {
color: #38a1f3;
}
.form .social-input i.fa-facebook {
color: #3b5998;
}
.form .social-input i.fa-instagram {
color: #3f729b;
}
.form .social-input i.fa-youtube {
color: #c4302b;
}
.form .social-input i.fa-linkedin {
color: #0077b5;
}

.table th,
.table td {
padding: 1rem;
text-align: left;
}

.table th {
background: var(--light-color);
}

/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.7rem 2rem;
position: fixed;
z-index: 1;
width: 100%;
top: 0;
border-bottom: solid 1px var(--primary-color);
opacity: 0.9;
}

.navbar ul {
display: flex; 
}

.navbar a {
color: #fff;
padding: 0.45rem;
margin: 0 0.25rem;
}

.navbar a:hover {
color: var(--primary-color);
}

.navbar .wele span {
margin-right: 0.6rem;
}

/* Landing Page */
.landing {
position: relative;
background: url("./img/showcase.jpg") no-repeat center center/cover;
height: 100vh;
}

.landing-inner {
color: #fff;
height: 100%;
width: 80%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

/* Profiles Page */
.profile {
display: grid;
grid-template-columns: 2fr 4fr 2fr;
align-items: center;
grid-gap: 2rem;
padding: 1rem;
line-height: 1.8;
margin-bottom: 1rem;  
}

/* Profile Page */
.profile-grid {
display: grid;
grid-template-areas:
"top top"
"about about"
"exp edu"
"github github";
grid-gap: 1rem;
}

.profile-top {
grid-area: top;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

.profile-top img {
width: 250px;
}

.profile-top .icons a {
color: #fff;
margin: 0 0.3rem;
}

.profile-top .icons a:hover {
color: var(--dark-color);
}

.profile-about {
grid-area: about;
text-align: center;
 }

.profile-about .skills {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.profile-exp {
grid-area: exp;
}

.profile-edu {
grid-area: edu;
}

.profile-exp h2,
.profile-edu h2 {
margin-bottom: 1rem;
}

.profile-exp > div,
.profile-edu > div {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: #ccc 1px dotted;
}

.profile-exp > div:last-child,
.profile-edu > div:last-child {
border: 0;
}

.profile-exp p,
.profile-edu p {
margin: 0.5rem 0;
}

.profile-github {
grid-area: github;
}

.profile-github .repo {
display: flex;
}

.profile-github .repo > div:first-child {
flex: 7;
flex-basis: 70%;
}

.profile-github > div:last-child {
flex: 3;
flex-basis: 20%;
}

/* Posts Page */
.post-form .post-form-header {
background: var(--primary-color);
padding: 0.5rem;
}

.post {
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 2rem;
align-items: center;
}

.post > div:first-child {
text-align: center;
}

.post img {
width: 100px; 
}

.post ment-count {
background: var(--light-color);
color: var(--primary-color);
padding: 0.1rem 0.2rem;
border-radius: 5px;
font-size: 0.8rem;
}

.post .post-date {
color: #aaa;
font-size: 0.8rem;
margin-bottom: 0.5rem; 
}

/* Mobile Styles */
@media (max-width: 700px) {
.container {
margin-top: 8rem;
 }

.hide-sm {
display: none;
}

/* Text Styles */
.x-large {
font-size: 3rem;
}

.large {
font-size: 2rem;
}

.lead {
font-size: 1rem;
}

/* Navbar */
.navbar {
display: block;
text-align: center;
  }

.navbar ul {
text-align: center;
justify-content: center;
}

.navbar h1 {
margin-bottom: 1rem;
 }

.navbar .wele {
display: none;
}

/* Profiles Page */
.profile {
grid-template-columns: 1fr;
text-align: center;
}

.profile ul {
display: none;
}

/* Profile Page */

.profile-top img,
.profile img {
width: 200px;
margin: auto;
}

.profile-grid {
grid-template-areas:
  "top"
  "about"
  "exp"
  "edu"
  "github";
}

.profile-about .skills {
flex-direction: column;
}

.dash-buttons a {
display: block;
width: 100%;
margin-bottom: 0.2rem;
}

.post {
grid-template-columns: 1fr;
}
.post a,
.post button {
padding: 0.3rem 0.4rem;
}
}

I am rendering 2 ponents in my React application, which should show one after the other on the screen. But they are overlapping. Also the layout is also not how I expected it to be, see photo of error. I am not able to figure out the cause. Link to actual project: https://evening-coast-59870.herokuapp./register

Here is my main ponent App.js which renders Navbar, Login and Register ponents as per the route.

import React, { Fragment } from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Navbar from "./ponents/layout/Navbar";
import Landing from "./ponents/layout/Landing";
import Login from "./ponents/auth/Login";
import Register from "./ponents/auth/Register";

const App = () => (
<Router>
<Fragment>
  <Navbar />

  <Switch>
    <Route exact path="/" ponent={Landing} />
    <Route exact path="/login" ponent={Login} />
    <Route exact path="/register" ponent={Register} />
  </Switch>
</Fragment>
</Router>
);

export default App;

Register.js:

import React, { Fragment } from "react";
import { Link } from "react-router-dom";
const Register = () => {
return (
<Fragment>
  <h1 className="large text-primary">Sign Up</h1>
  <p className="lead">
    <i className="fas fa-user"></i> Create Your Account
  </p>
  <form className="form" action="create-profile.html">
    <div className="form-group">
      <input type="text" placeholder="Name" name="name" required />
    </div>
    <div className="form-group">
      <input type="email" placeholder="Email Address" name="email" />
      <small className="form-text">
        This site uses Gravatar so if you want a profile image, use a
        Gravatar email
      </small>
    </div>
    <div className="form-group">
      <input
        type="password"
        placeholder="Password"
        name="password"
        minLength="6"
      />
    </div>
    <div className="form-group">
      <input
        type="password"
        placeholder="Confirm Password"
        name="password2"
        minLength="6"
      />
    </div>
    <input type="submit" className="btn btn-primary" value="Register" />
  </form>
  <p className="my-1">
    Already have an account? <Link to="/login">Sign In</Link>
  </p>
</Fragment>
);
};
export default Register;

Login.js

import React from "react";

const Login = () => {
return (
<div>
  <b>Login</b>
</div>
);
};
export default Login;

Main CSS file App.css

/* Global Styles */
:root {
--primary-color: #17a2b8;
--dark-color: #343a40;
--light-color: #f4f4f4;
--danger-color: #dc3545;
--success-color: #28a745;
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: "Raleway", sans-serif;
font-size: 1rem;
line-height: 1.6;
background-color: #fff;
color: #333;
}

a {
color: var(--primary-color);
text-decoration: none;
}

ul {
list-style: none;
}

img {
width: 100%;
}

/* Utilities */
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
padding: 0 2rem;
margin-top: 6rem;
margin-bottom: 3rem;
}

/* Text Styles*/
.x-large {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 1rem;
}

.large {
font-size: 3rem;
line-height: 1.2;
margin-bottom: 1rem;
}

.lead {
font-size: 1.5rem;
margin-bottom: 1rem;
}

.text-center {
text-align: center; 
}

.text-primary {
color: var(--primary-color);
}

.text-dark {
color: var(--dark-color);
}

/* Padding */
.p {
padding: 0.5rem;
}
.p-1 {
padding: 1rem;
}
.p-2 {
padding: 2rem; 
}
.p-3 {
padding: 3rem;
}
.py {
padding: 0.5rem 0;
}
.py-1 {
padding: 1rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}

/* Margin */
.m {
margin: 0.5rem; 
}
.m-1 {
margin: 1rem;
}
.m-2 {
margin: 2rem;
}
.m-3 {
margin: 3rem;
}
.my {
margin: 0.5rem 0;
}
.my-1 {
margin: 1rem 0;
}
.my-2 {
margin: 2rem 0;
}
.my-3 {
margin: 3rem 0;
}

.btn {
display: inline-block;
background: var(--light-color);
color: #333;
padding: 0.4rem 1.3rem;
font-size: 1rem;
border: none;
cursor: pointer;
margin-right: 0.5rem;
transition: opacity 0.2s ease-in;
outline: none;
}

.badge {
font-size: 0.8rem;
padding: 0.1rem;
text-align: center;
margin: 0.3rem;
background: var(--light-color);
color: #333;
}

.alert {
padding: 0.8rem;
margin: 1rem 0;
opacity: 0.9;
background: var(--light-color);
color: #333;
}

.btn-primary,
.bg-primary,
.badge-primary,
.alert-primary {
background: var(--primary-color);
color: #fff;
}

.btn-light,
.bg-light,
.badge-light,
.alert-light {
background: var(--light-color);
color: #333;
}

.btn-dark,
.bg-dark,
.badge-dark,
.alert-dark {
background: var(--dark-color);
color: #fff;
}

.btn-danger,
.bg-danger,
.badge-danger,
.alert-danger {
background: var(--danger-color);
color: #fff;
}

.btn-success,
.bg-success,
.badge-success,
.alert-success {
background: var(--success-color);
color: #fff;
}

.btn-white,
.bg-white,
.badge-white,
.alert-white {
background: #fff;
color: #333;
border: #ccc solid 1px;  
}

.btn:hover {
opacity: 0.8;
}

.bg-light,
.badge-light {
border: #ccc solid 1px;
}

.round-img {
border-radius: 50%;
}

.line {
height: 1px;
background: #ccc;
margin: 1.5rem 0;
}

/* Overlay */
.dark-overlay {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Forms */
.form .form-group {
margin: 1.2rem 0;
}

.form .form-text {
display: block;
margin-top: 0.3rem;
color: #888;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="date"],
.form select,
.form textarea {
display: block;
width: 100%;
padding: 0.4rem;
font-size: 1.2rem;
border: 1px solid #ccc;
}

.form input[type="submit"],
button {
font: inherit;
}

.form .social-input {
display: flex; 
}

.form .social-input i {
padding: 0.5rem;
width: 4rem;
}

.form .social-input i.fa-twitter {
color: #38a1f3;
}
.form .social-input i.fa-facebook {
color: #3b5998;
}
.form .social-input i.fa-instagram {
color: #3f729b;
}
.form .social-input i.fa-youtube {
color: #c4302b;
}
.form .social-input i.fa-linkedin {
color: #0077b5;
}

.table th,
.table td {
padding: 1rem;
text-align: left;
}

.table th {
background: var(--light-color);
}

/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.7rem 2rem;
position: fixed;
z-index: 1;
width: 100%;
top: 0;
border-bottom: solid 1px var(--primary-color);
opacity: 0.9;
}

.navbar ul {
display: flex; 
}

.navbar a {
color: #fff;
padding: 0.45rem;
margin: 0 0.25rem;
}

.navbar a:hover {
color: var(--primary-color);
}

.navbar .wele span {
margin-right: 0.6rem;
}

/* Landing Page */
.landing {
position: relative;
background: url("./img/showcase.jpg") no-repeat center center/cover;
height: 100vh;
}

.landing-inner {
color: #fff;
height: 100%;
width: 80%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

/* Profiles Page */
.profile {
display: grid;
grid-template-columns: 2fr 4fr 2fr;
align-items: center;
grid-gap: 2rem;
padding: 1rem;
line-height: 1.8;
margin-bottom: 1rem;  
}

/* Profile Page */
.profile-grid {
display: grid;
grid-template-areas:
"top top"
"about about"
"exp edu"
"github github";
grid-gap: 1rem;
}

.profile-top {
grid-area: top;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}

.profile-top img {
width: 250px;
}

.profile-top .icons a {
color: #fff;
margin: 0 0.3rem;
}

.profile-top .icons a:hover {
color: var(--dark-color);
}

.profile-about {
grid-area: about;
text-align: center;
 }

.profile-about .skills {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.profile-exp {
grid-area: exp;
}

.profile-edu {
grid-area: edu;
}

.profile-exp h2,
.profile-edu h2 {
margin-bottom: 1rem;
}

.profile-exp > div,
.profile-edu > div {
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: #ccc 1px dotted;
}

.profile-exp > div:last-child,
.profile-edu > div:last-child {
border: 0;
}

.profile-exp p,
.profile-edu p {
margin: 0.5rem 0;
}

.profile-github {
grid-area: github;
}

.profile-github .repo {
display: flex;
}

.profile-github .repo > div:first-child {
flex: 7;
flex-basis: 70%;
}

.profile-github > div:last-child {
flex: 3;
flex-basis: 20%;
}

/* Posts Page */
.post-form .post-form-header {
background: var(--primary-color);
padding: 0.5rem;
}

.post {
display: grid;
grid-template-columns: 1fr 4fr;
grid-gap: 2rem;
align-items: center;
}

.post > div:first-child {
text-align: center;
}

.post img {
width: 100px; 
}

.post .ment-count {
background: var(--light-color);
color: var(--primary-color);
padding: 0.1rem 0.2rem;
border-radius: 5px;
font-size: 0.8rem;
}

.post .post-date {
color: #aaa;
font-size: 0.8rem;
margin-bottom: 0.5rem; 
}

/* Mobile Styles */
@media (max-width: 700px) {
.container {
margin-top: 8rem;
 }

.hide-sm {
display: none;
}

/* Text Styles */
.x-large {
font-size: 3rem;
}

.large {
font-size: 2rem;
}

.lead {
font-size: 1rem;
}

/* Navbar */
.navbar {
display: block;
text-align: center;
  }

.navbar ul {
text-align: center;
justify-content: center;
}

.navbar h1 {
margin-bottom: 1rem;
 }

.navbar .wele {
display: none;
}

/* Profiles Page */
.profile {
grid-template-columns: 1fr;
text-align: center;
}

.profile ul {
display: none;
}

/* Profile Page */

.profile-top img,
.profile img {
width: 200px;
margin: auto;
}

.profile-grid {
grid-template-areas:
  "top"
  "about"
  "exp"
  "edu"
  "github";
}

.profile-about .skills {
flex-direction: column;
}

.dash-buttons a {
display: block;
width: 100%;
margin-bottom: 0.2rem;
}

.post {
grid-template-columns: 1fr;
}
.post a,
.post button {
padding: 0.3rem 0.4rem;
}
}

• javascript
• css
• reactjs
• dom
• react-router

Share Follow asked Feb 4, 2020 at 6:12 pc.97pc.97 15311 gold badge44 silver badges1212 bronze badges 2

• 1 I don't think this has anything to do with ReactJS, it seems to be a CSS problem. The overlap is probably do to the position: fixed of .navbar. – Titus Commented Feb 4, 2020 at 6:21
• Yes actually, it was the exact problem. It is fixed now, thanks a lot! – pc.97 Commented Feb 4, 2020 at 7:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I believe there is some issue in the css, the navbar position is fixed and it's causing the issue

You have to know the difference of Fragment and div or any wrapping elements as you seem to abuse it.

A mon pattern in React is for a ponent to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.

You should only be using it if you wanted to wrap a multiple jsx as a way to not render excessive elements again in the DOM.

Consider this:

// Component1
<Fragment>
 <h1>Test</h1>
</Fragment>

// Component2
<Fragment>
 <h1>Test 2</h1>
</Fragment>

// If you do this
<Component1 />
<Component2 />

// It'll end up actually like this:
<h1>Test</h1>
<h2>Test 2</h2>

Your code will typically stack itself with no wrapping divs.

With regards to your issue, It is probably a position: fixed in your navbar. Try adding some padding for promise.

EXAMPLE FOR FRAGMENT CONCERN:

Assuming you have nav like this:

<nav>
 ...
</nav>

and currently how you call your pages is you wrap it with fragment

<Fragment>
 <h1>Test</h1>
 <ul>
   <li>list</li>
 </ul>
</Fragment>

and your main seems to be wrapped in Fragment too

<Fragment>
<Nav />
<ComponentSample />
<Fragment>

The oute on the DOM? It'll be something like this:

<html>
...
<body>
  <nav>
  <h1>Test</h1>
  <ul>
    <li>list</li>
  </ul>
  </body>
</html>

Shouldn't it be something like

<html>
<body>
  <nav>
  <div class="home"> // where "home" could be styled as a proper page
    <h1>Test</h1>
    <ul>
      <li>list</li>
    </ul>
  </div>
 </body>
</html>

本文标签： javascriptComponents overlapping each other in ReactStack Overflow