CODEWITHSUNDEEP
javascriptcssreactjssass
Rob Terrell
Rob Terrell

Reputation: 2552

Ensure div is always below absolutely positioned div

I am currently developing a single page react application. The top portion of the application contains a hero image with a call to action. I would like the rest of the application to sit below this top portion. The issue I am running into is that the container-background div is positioned absolutely; therefore, I can't seem to find a way to ensure that the lower half of my application will always sit beneath it.

EDIT**** I believe the issue lies in the image, but I am unsure of how to ensure the container and the image are always the same size

my jsx code is as follows:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <>
    <div className='container'>
      <div className='container-background'>
        <img
          id='rob'
          src='https://i.imgur.com/iyFtMNA.jpg'
          alt='bg'
          className='container-background-img'
        />
      </div>
      <div id='content' className='content'>
     {/*  nav and CTA will go inside of here */}
      </div>
    </div>
    {/* I would like this section to be below the image!!!! */}
    <div>hello</div>
  </>
  );
}

my css is as follows:

body {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}
.container .container-background {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.25;
}

.container-background-img {
  width: 100%;
  position: relative;
}

.container .content {
  position: relative;
  z-index: 1;
}

.app-outer {
  max-width: 1170px;
  margin: 0 auto;
  position: relative;
  padding: 0rem 1rem;
}

@media only screen and (max-width: 1170px) {
  .container-background-img {
    height: 656px;
    object-fit: cover;
  }
}

@media only screen and (max-width: 768px) {
  .container-background-img {
    height: 653px;
    object-fit: cover;
  }
}

attached is the following link for debugging https://codesandbox.io/s/naughty-lamarr-fdgm1?file=/src/styles.css:0-671

Upvotes: 1

Views: 50

Answers (2)

Imran Rafiq Rather
Imran Rafiq Rather

Reputation: 8078

By removing the position:absolute; from your .container-background and adding the CSS for your navbar and cta. You code is working fine:

CODESANDBOX: https://codesandbox.io/s/issue-react-mnn6u?file=/src/styles.css:74-127

CODE CHANGES :

.container .container-background {
  opacity: 0.25;
}

CODE ADDITIONS ::

/* CODE ADDED */
#navbar {
  position: absolute;
  top: 0;
}

#content {
  position: absolute;
  top: 20px;
}

Upvotes: 1

k-wasilewski
k-wasilewski

Reputation: 4613

Make the .container-background's height fixed and use a calc() to substract that height from 100% - you'll get what you want. Just wrap your "content below" in a div.

<div>
    {/* I would like this section to be below the image!!!! */}
</div>

.container-background {
  height: 100px; // change the fixed height accordingly
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.25;
}

.content {
  height: calc(100% - 100px); // change the substracted height accordingly
  position: relative;
  z-index: 1;
}

Upvotes: 0

Related Questions