Home / Questions / 279056
Accepted
Ceci Benitez
Asked: 2020-07-16 06:34:15 +0800 CST 2020-07-16 06:34:15 +0800 CST

Why is my z-index not working?

  • 772

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>
     );
}

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>
         );
    }

I have an image that I want to be above the footer in the login and register pages, that is, in these I want the footer to disappear, so I put a z-index to a ptag.

.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;
}

enter image description here

css

1 Answers

  1. Best Answer

    I already did it, I just had to hide the footer component in the "/register" and "/login" routes to achieve this I used a functionality react-router-domcalled withRouterthe footer jsx code looks like this:

    import React from 'react';
import { withRouter } from 'react-router-dom';  
import '../index.css';

const Footer = (props) => {
    const { location } = props;

    if (location.pathname.match("/register") || location.pathname.match("/login")){
        return null;
    }

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

    • 0