Z-index in my React project not working like spected

1

I still can see text avobe the image background

overlap
overlap1366×768 212 KB

here I have the jsx code to the footer

const Footer = () => {
    return ( 
       <footer>
            <p>
                &copy; 2019, made by <i className="fa fa-heart"></i> Cecilia Benítez Casaccia, for a better web.
            </p>
       </footer>
     );
}

here I have the jsx code to the register page

render() {     
        return ( 
            <div className = "bg-image">
                <img src = "https://github.com/Ceci007/images/blob/master/img-vidly/avengers.jpg?raw=true"
                 alt = "background"
               />
                <div className = "container bg-overlap">
                    <div className = "row">
                        <div className = "col-lg-4 col-md-6 col-sm-8 ml-auto mr-auto">
                        <form onSubmit = {this.handleSubmit} >
                          <div className = "card card-login card-hidden">
                            <div className = "card-header card-header-primary text-center">
                                <h4>Register</h4>
                            </div>
                            <div className = "card-body text-center p-4">
                            {this.renderInput("username", "Username")}
                            {this.renderInput("password", "Password", "password")}
                            {this.renderInput("name", "Name")}
                            {this.renderButton("Register")}
                            </div>
                          </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>
         );
    }

here are the styles

.bg-image {
 position: absolute;
 margin-top: 65px;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 z-index: 2;
}

.bg-overlap {
  position: absolute;
  width: 90%;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  z-index: 3;
}

footer {
  width: 100%;
  display: block !important;
  margin: 0 auto !important;
  position: relative;
  z-index: -1 !important;
}

footer p {
  text-align: center !important;
  display: block;
  position: relative;
  z-index: -1;
  overflow: hidden;
}

footer p:before {
  width: 100%;
  height: 1px;
  background-color: rgba(0,0,0,0.2);
  display: block;
  content: " ";
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 30px;
}
2

It’s working correctly. You need to realize that on a normal webpage the body content in the beginning and middle pushes content at the end of the body down which is what keeps the footer at the bottom of the document if not also in the viewport.

You chopped up a single layer document that would have worked fine and now everything is at the top of its own layer. I don’t understand why you’re using your layering scheme, but you have to push the parts down to their respective places or use positioning, to put the footer at the bottom of the viewport, for example.

1 Like
3

I don’t care where the footer is positioned I just don’t want to show the footer avobe the image background, but just for the login and register pages that’s why I don’t use a display: none becouse I want to show the footer in the other pages here is my repo https://github.com/Ceci007/vidly-frontend maybe I can do an if statement and use the routing and then if the routes are “/login” or “/register” I add the class display: none, but I don’t know how to achieve this, that’s why I though using z-index would be easier.
@tlc35us