1

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

tengo una imagen que quiero que este encima del footer en las paginas de login y register, es decir en estas quiero que el footer desaparesca por lo que puse un z-index a un p tag.

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

introducir la descripción de la imagen aquí

7
  • 4
    El comportamiento de la propiedad z-index depende completamente del lugar que ocupe dentro del DOM el elemento al que afecta. Sin mostrar tu estructura HTML me temo que va a ser difícil ayudarte.
    – phpMyGuel
    el 15 jul. 2019 a las 14:56
  • ya agregue mi codigo jsx @phpMyGuel no se mucho de css pero creo que el css es lo que esta fallando, pero no estoy segura. el 15 jul. 2019 a las 15:10
  • 1
    Mejor si pones el HTMLgenerado para ver donde está el footer con respecto a los otros elementos en el DOM
    – user7176
    el 16 jul. 2019 a las 8:36
  • no estoy pudiendo copiar nada de la tabla Elements del inspector, a lado de Console, es decir donde esta el html, tu usas alguna extension para poder copiar el codigo generado? @blonfu el 16 jul. 2019 a las 13:33
  • @CeciBenitez no hace falta ninguna extensión, en el navegador ctrl + u te saca el codigo fuente de la página, puedes coger de ahí la parte que interesa
    – user7176
    el 16 jul. 2019 a las 13:54

1 respuesta 1

0

ya lo logre, solo tenia que esconder el componente footer en las rutas "/register" y "/login" para lograr esto utilice una funcionalidad de react-router-dom llamada withRouter el codigo jsx del footer queda asi:

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

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.