Проблема с placeholder
У меня есть код для поля ввода, при нажатии на это поле placeholder текст смещается на границу поля ввода, но есть проблема, placeholder находится не поверх границы, а под ней. z-index не помогает. Заранее спасибо!
.input{
transform: translate(0%, 150%)
}
.input[type="text"]{
padding-left: 5%;
}
.input::placeholder{
color: #cdcdcd;
font-family: "Montserrat", sans-serif;
font-size: 80%;
font-weight: 700;
font-style: normal;
letter-spacing: normal;
line-height: 100%;
text-align: left;
text-transform: uppercase;
z-index: 10;
background-color: #fff;
transition: all .2s;
}
.input:focus::placeholder{
position: absolute;
color:#7beec7;
top: 0px;
left: 0px;
transform: translate(0%, -110%);
background-color: #fff;
z-index: 10;
} <div class="inputcontainer">
<input placeholder="Your Email" type="text" name="email" class="input">
</div>