CODEWITHSUNDEEP
javascripthtmlcssreactjs
user19367608
user19367608

Reputation:

How to overlay/display part of a React component over another React component?

I have a create-react-app where I have say 2 separate components. I want to display part of the Footer component on top the Home component. My App.js looks like this:

App.js

function App() {
  return (
   <>
   <Home/>
   <Footer/>
    </>
  );
}

export default App;

I want to display the div containing "Our Partners" of the Footer component within the home component.

Footer.js

const Footer = () => {
  return (
    <section className="footer-section">
      <div className="footer-container">
        <h2 className="footer-heading">
          OUR
          <br />
          PARTNERS
        </h2>
      </div>
     
    </section>
  );
};

export default Footer;

Footer.css

.footer-section {
  padding-right: 25px;
  padding-bottom: 30px;
  padding-left: 25px;
  background-color: #410099;
  }
  
  .footer-container {
    top: 0;
    z-index:999;
    margin-top: -250px;
    padding-top: 55px;
    padding-bottom: 55px;
    background-color: #fff;
    padding-right: 55px;
    padding-left: 55px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer-heading {
    color: #410099;
    margin-top: 0;
    margin-bottom: 0;
    font-family: sans-serif;
    font-size: 45px;
    line-height: 1.1;
    font-weight: 700;
  }

Home.js code is irrelevant but here's the css:

Home.css

.home-section {
  padding-top: 140px;
  padding-bottom: 300px;
  background-image: grey;
  background-position: 50% 0;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 300px;
  }

What I want to achieve: enter image description here

What I have achieved (thought negative margin was enough but apparently its not) enter image description here

How can I fix this issue?

Upvotes: 0

Views: 1567

Answers (1)

developedbymark
developedbymark

Reputation: 254

.footer-container {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  align-items: center
}

.footer-border {
  width: 50px;
  height: 150px;
  display: grid;
  grid-template-rows: 80% 20%
}

.footer-border-top {
  background: purple;
}

.footer-border-bottom {
  background: blue
}

.footer-content {
  padding-left: 3em;
}
<section class="footer-section">
  <div class="footer-container">
    <div class="footer-border">
      <div class="footer-border-top"></div>
      <div class="footer-border-bottom"></div>
    </div>
    <div class="footer-content">
      <h2 class="footer-heading">
        OUR
        <br /> PARTNERS
      </h2>
    </div>
    <div class="footer-border">
      <div class="footer-border-top"></div>
      <div class="footer-border-bottom"></div>
    </div>
  </div>
</section>

there you go :)

BTW, the values are arbitrary (e.g. 'gap: 4em', 'grid-template-rows: 80% 20%'...), feel free to change them if you need to.

Upvotes: 1

Related Questions