How i can bring my <text area> in front of CSS animation?-CodePudding

I'm trying to move my in front my CSS animation background and set it below the buttons i tried adjusting the z-index of my text area and the animations, i gave an id to the text area and a and tried to modify that in CSS but none of this worked and it stills hidden back there, a I'm relative new and i don't know what i have to do, this is my first post so please let me know if i did something wrong.

HTML:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>

<title>Fantasy Name Generator(Test)</title>
</head>
<body>


<div className="container">
    <img  id="img3">
    <img  id="img2">
    <img  id="img1">
</div>

<div >
<button  id="elvenFemButton"type="button">Elves</button>
<button  type="button">Human</button>
<button  type="button">dwarf</button>
</div>

<div >
 <textarea id="areaOfText"></textarea>   
</div>

<script src="ElvenFem.js"></script>
</body>
</html>

CSS:

.textArea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
  background-color:black;
  font-size: 16px;
  resize: none;
  z-index: -1;
  position: relative;
}

.buttons{
  position: absolute;
}
.elven_button {
  
  background-color: springgreen;
  transition: background-color .5s;
  font-size: 16px;
  padding: 14px 40px;
  border-radius: 12px ;
  
}

.elven_button:hover{
  background-color: palegreen;
  cursor:url("../Media/joke3.cur"), default;
}

.dwarf_button{
 
  background-color: rgb(187, 182, 182);
  transition: background-color .5s;
  font-size: 16px;
  padding: 14px 40px;
  border-radius: 12px ;
}

.dwarf_button:hover{
  background-color: rgb(248, 248, 247);
  cursor:url("akary_Hammer.cur"),default;

}

.human_button{
 
  background-color: chocolate;
  transition: background-color.5s;
  font-size: 16px;
  padding: 14px 40px;
  border-radius: 12px ;
}

.human_button:hover{
  background-color: wheat;
  cursor: url("humanD1.cur"),default;
}

.textarea {
  position: relative;
top: 40px; left: 40px;
  
}
.container{
    position: relative;
    display: block;
    width: 100%;
    max-width: 400px;
    height: 280px;
    margin: 0 auto;
    z-index: 2;
}

.img{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-animation: fade 24s infinite;
    animation: fade 24s infinite;
}

#img1{
    animation-delay: 0s;
    background-image: url('city1.jpg');

}

#img2{
  
  background-image: url('human2.jpg');
  animation-delay: 8s;

}

#img3{
  
    background-image: url('morgoth_ungoliath.jpg');
    animation-delay: 16s;
}   

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  34% {
    opacity: 0;
  }
  88% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

CodePudding user response：

.wrapper {
    position: relative;
}

.pseudo-img {
    position:absolute;
    top: 100px;
    height:200px;
    width: 200px;
    background-color:black;
    color:orangered;
    z-index: 1;
    }
    
.textArea {
    position: absolute;
    color:white;
    top: 200px;
    left: 80px;
    height: 100px;
    width:100px;
    z-index:2;
    }

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="Fantasy.css"/>

<title>Fantasy Name Generator(Test)</title>
</head>
<body>

<div className="wrapper">
<div className="container">
     <div >My animation</div>
    <img  id="img3">
    <img  id="img2">
    <img  id="img1">
</div>

<div >
<button  id="elvenFemButton"type="button">Elves</button>
<button  type="button">Human</button>
<button  type="button">dwarf</button>
</div>

<div >
 <p id="areaOfText">My text</p>   
</div>
</div>

<script src="ElvenFem.js"></script>
</body>
</html>

Are you looking for something like this?

CodePudding user response：

I think you by accident named the class .textarea instead of textArea give it a background-color and some content inside the p tag to see it clearly