Problem with Z-index

Question

Problem with Z-index

Asked 5 years, 4 months ago

Viewed 269 times

0

I’m having trouble using the z-index. The elements #questionSingUp and #actionSingUp CSS are not overlapping with div .loginActionWrap.

I tried to change via Javascript but also could not.

var changeToLogin = document.getElementById("loginBtn");
var animation = document.getElementById("divAnimation");
var changeToSingUp = document.getElementById("singUpBtn");
var formSingIn = document.getElementById("actionSingIn");
var formSingUp = document.getElementById("actionSingUp");
var questionSingIn = document.getElementById("questionLogin");
var questionSingUp = document.getElementById("questionSingUp");


changeToLogin.addEventListener('click', function() {
	animation.classList.add("animationToRight");
	animation.classList.remove("animationToLeft");

	//questionSingIn.style.display = "none";
	//formSingIn.style.display = "block";

	//questionSingUp.style.display = "block";
	//formSingUp.style.display = "none";


	
 	 console.log("clicado");
});

changeToSingUp.addEventListener('click', function() {
	animation.classList.add("animationToLeft");
	animation.classList.remove("animationToRight");

	//questionSingIn.style.zIndex = "1";
	//formSingIn.style.display = "none";

	//questionSingUp.style.display = "none";
	//formSingUp.style.display = "block";
	
	
	

  	console.log("clicado");
});

h2 {

  font-size: 28px;
  color: #C1C4D6;
}
p{
  font-size: 14px;
  color: #C1C4D6;
  padding: 15px 0px 20px;
 /* display: block;*/


}

.retangle {

  padding-top: 50px;
  padding-left: 100px;
  padding-right: 100px;
  height: 300px;
  width: 600px;
  line-height: 50px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -400px;
  background-color: rgb(0, 0, 0, 0.55);
  border-radius: 3px;
  opacity: 0.90;
}

#questionSingUp {
  z-index: 1;
  position: absolute;
  width: 270px;
  height: 200px;
  background-color: pink;

}

#questionLogin {
  
  position: relative;
  width: 270px;
  height: 200px;
  float: right;
  background-color: red;
}

#actionSingUp {
/*display: none; PRETOOOOOOOO*/
z-index: 2;
position: absolute;
width: 270px;
height: 200px;
background-color: rgb(58,58,58);
}

#actionSingIn {
/*display: none; PRETOOOOOOO*/

position: relative;
margin-left: 329px;
width: 270px;
height: 200px;
background-color: rgb(58,58,58);
}

.loginActionWrap {
  z-index:-1;
  height: 450px;
  width: 370px;
  line-height: 50px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -400px;
  margin-left: -365px;
  background-color: rgb(255,255,255);
  border-radius: 3px;
  box-shadow: 0 0 10px 3px rgba(39, 37, 37, 0.45);
  

}
#singUpBtn{
  display: inline-block;
  border: solid 1px #C3C3C3;
  color: #C3C3C3;
  min-width: 140px;
  border-radius: 5px;
  line-height: 31px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;

}

#loginBtn {
  display: inline-block;
  border: solid 1px #C3C3C3;
  color: #C3C3C3;
  min-width: 140px;
  border-radius: 5px;
  line-height: 31px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}


.animationToRight {
  -webkit-animation: mymoveRight 5s ; /* Safari 4.0 - 8.0 */
  animation: mymoveRight 0.5s ;
  -webkit-animation-fill-mode: forwards;
}

.animationToLeft {
  top: 50%;
  left: 50%;
  -webkit-animation: mymoveLeft 5s ; /* Safari 4.0 - 8.0 */
  animation: mymoveLeft 0.5s ;
  -webkit-animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */


@keyframes mymoveRight {
    from {right: 50%;}
    to {margin-left: 0%;}
}

@keyframes mymoveLeft {
    from {margin-left: 0%;}
    to {left: 50%;}
}

#c1{
  height: 450px;
  width: 370px;
  line-height: 50px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -400px;
  margin-left: -365px;
  background-color: rgb(255,255,255);
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>particles.js</title>
  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  <meta name="author" content="Vincent Garreau" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<!-- particles.js container -->

<!--Login-->
  <div class="retangle">
    <div id="questionSingUp">
      <h2><span>Dont have an accont</span> ?</h2>
      <p><span>Lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames</span></p>

      <a href="#" id="singUpBtn"> <span>Sing up</span> </a>
    </div>

    
    <div id="questionLogin">
      <h2><span>Have an accont</span> ?</h2>
      <p><span>Lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames
               lorem ipsum dolor sit ames</span></p>

      <a href="#" id="loginBtn"><span>Log in</span></a>
    </div>
    <div id="actionSingUp">
      <!--<form action="#">
        <fieldset>
          <legend class="title">Sing Up</legend>

          <div class="inputBlock">


            <div class="inputWrap">
              <input type="text" id="singName" class="input" placeholder="Full Name">
              <label for="singName" class="label"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singEmail" class="input" placeholder="Email">
              <label for="singEmail" class="label"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singPass" class="input" placeholder="Activate Code">
              <label for="singPass" class="label"></label>
            </div>


          </div>

          <input type="submit" value="Sing Up" class="BtnSingUp">
        </fieldset>
      </form>-->
    </div>

    <div id="actionSingIn">

      <!--<form action="#">
        <fieldset>
          <legend class="title">Sing Up</legend>

          <div class="inputBlock">


            <div class="inputWrap">
              <input type="text" id="singName" class="input" placeholder="Full Name">
              <label for="singName" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="text" id="singEmail" class="input" placeholder="Email">
              <label for="singEmail" class="labelEmail"></label>
            </div>
            <div class="inputWrap">
              <input type="password" id="singPass" class="input" placeholder="Passeord">
              <label for="singPass" class="labelEmail"></label>
            </div>


          </div>
          <a href="#" class="forgotPass"><span>Forgot password</span> ?</a>
          <input type="submit" value="Sing Up" class="BtnSingUp">
        </fieldset>
      </form>-->

    </div>

  </div>
  <div id="divAnimation" class="loginActionWrap"></div>



</body>
</html>

Place z-index: -1 in the .loginActionWrap that he will always be behind.

– Sam

2019/08/13 at 14:24
@Sam Thanks for your attention, but when I put z-index:-1 the white div becomes transparent so you can see everything behind it. The ideal would be if only #actionSingUp overlaps . loginActionWrap

– Gabriel Silva

2019/08/13 at 15:11

1 answer

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by Léu Almeida • 61 points · Answer 1 · 2019-08-15T22:22:37+00:00

What happens is that the #questionSingUp is with z-index smaller than the #actionSingUp. Try to leave it like that:

#questionSingUp {
  z-index: 10;
  position: absolute;
  width: 270px;
  height: 200px;
  background-color: pink;
}

And the other one would look like this:

#actionSingUp {
  /*display: none; PRETOOOOOOOO*/
  z-index: 5;
  position: absolute;
  width: 270px;
  height: 200px;
  background-color: rgb(58,58,58);
}