-1
I searched here for the site and ended up not finding the one that satisfies my doubt. I have two boxes, where one is behind the other. After I click on a button, I would like the z-index to change so that the other box comes forward (as if the person has changed the link, but that will not happen). Also, one problem I have is that I’m not able to center these two boxes on the page. The point of centering is that they are at the top left side of the page, not at its center.
Ps: I put the JS tag by assuming that it is for it that the issue of the index of Second-content changes to first-content. If it’s not that, please correct me and I’ll change.
<form action="registrarDespesas.php" method="POST" enctype ="multipart/form-data" name="registro">
<div class="container">
<div class="content first-content">
<div class="first-column">
<h2 class="title title-grey">Insira os dados de sua despesa.</h2>
</div>
<div class="second-column">
<p>
<select size="1" name="tipoDespesa" class="select" required style="margin-left:2px;">
<option value="" disabled selected>Tipo</option>
<option>Almoço</option>
<option>Jantar</option>
<option>Quilometragem</option>
<option>Gasolina</option>
<option>Pedágio</option>
<option>Táxi/Uber</option>
<option>Estacionamento</option>
<option>Passagem | Ônibus</option>
<option>Passagem | Metrô/Trem</option>
<option>Cursos/Treinamentos</option>
<option>Outras</option>
</select>
<p><input type="number" name="numeroKm" placeholder="KM" id="km" step=".1" style="display: none; height: 30px;width: 150;padding-left: 10px;">
<input type="number" name="precoDespesa" placeholder="R$" id="valor" step=".01" required placeholder="Insira um valor!"></p>
<p><input type="date" class="data" name="data" placeholder="dd/mm/aaaa" required placeholder="Insira uma data válida!">
<input type="text" name="limiteDespesa" id="limite" readonly></p>
<p><input type="file" name="fotoDespesa" id="file" required placeholder="É necessário o envio da despesa!"></p>
<textarea name="observacao" placeholder="Deixe quaisquer observações aqui!"></textarea>
<p><button type ="submit" name="submit" class="btn btn-grey">registrar</button></p>
<p><a class="btn btn-grey" href="areaUsuario.php" style="text-decoration:none;">finalizar</a></p>
<a class="btn btn-grey" href="selecionarProjeto.php" style="text-decoration:none;">voltar</a>
</div>
</div>
<div class="content second-content">
<div class="third-column">
<h2 class="title title-grey h22">Selecione o projeto.</h2>
</div>
<div class="quarter-column">
<p><select class="select2" name="tipoProjeto">
<option>KHEDI</option>
<option>LCSC</option>
<option>CCS</option>
</select>
<p><a class="btn btn-grey-avancar" href="registrarDespesas.php" style="text-decoration:none;">avançar</a></p>
<a class="btn btn-grey-voltar" href="areaUsuario.php" style="text-decoration:none;">voltar</a>
</div>
</div>
</div>
and here’s the CSS I’m referencing:
.container{
display: flex;
justify-content: center;
align-items: stretch;
height: 100vh;
margin-top: -170px;
}
.content{
border-radius: 15px;
background-color: darkslategray;
width: 960px;
height: 60%;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
align-self: center;
top: 2px;
left: 0;
}
.content::before{
content: "";
position: absolute;
background-color: #EBBE17;
width: 58%;
height: 100%;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}
.title{
font-size: 28px;
font-weight: bold;
}
.title-white{
color: #fff;
margin-bottom: 20px;
}
.title-grey{
color: darkslategray;
}
.description{
font-size: 14px;
font-weight: 300;
color: #fff;
line-height: 45px;
}
.btn{
border-radius: 15px;
text-transform: uppercase;
font-size: 10px;
padding: 10px 50px;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
margin-left: 20px;
display: inline-block;
}
.btn{
background-color: transparent;
border: 1px solid #fff;
color: #fff;
transition: background-color .4s;
}
.btn:hover{
background-color: #fff;
color: darkslategray;
}
.first-content{
display: flex;
z-index: 0;
position: absolute;
}
.first-column{
text-align: center;
flex: 1 0 auto;
z-index: 1;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.second-column{
z-index: 1;
flex: 1.4 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form{
display: flex;
flex-direction: column;
width: 55%;
text-align: center;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-transform: capitalize;
}
select{
height: 30px;
width: 300px;
border: none;
border-radius: 15px;
background-color: rgb(192, 192, 192);
color:darkslategray;
margin-left: 10px;
margin-bottom: 10px;
padding-left: 5px;
font-weight: bold;
}
input{
height: 20px;
width: 100%;
border: none;
border-radius: 15px;
background-color: rgb(192, 192, 192);
color:darkslategray;
margin-left: 3px;
margin-bottom: 10px;
font-weight: bold;
}
#valor{
padding-left: 10px;
width: 145px;
height: 30px;
}
textarea{
width: 71.5%;
border-radius: 15px;
margin-left: 10px;
padding-left: 10px;
height: 70px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
padding-top: 5px;
margin-bottom: 10px;
}
#file{
margin-bottom: 12px;
}
h2{
margin-left: 20px;
}
.btn-grey {
margin-top: 10px;
}
.data {
height: 30px;
width: 170px;
padding-left:6px;
}
#limite {
width: 128px;
padding-left: 10px;
height: 30px;
}
.fas{
color: white;
margin-left: 20px;
font-size: 25px;
}
.second-content {
display: flex;
position: absolute;
z-index: 1;
}
.btn-grey-avancar{
background-color: transparent;
border: 1px solid #fff;
color: #fff;
transition: background-color .4s;
}
.btn-grey-voltar{
background-color: transparent;
border: 1px solid #fff;
color: #fff;
transition: background-color .4s;
}
.select2 {
height: 30px;
width: 570%;
border: none;
border-radius: 15px;
background-color: rgb(192, 192, 192);
color:darkslategray;
margin-left: -40px;
margin-bottom: 25px;
padding-left: 5px;
font-weight: bold;
}
.h22{
margin-left: 40px;
}
.third-column{
text-align: center;
flex: 1 0 auto;
z-index: 1;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.quarter-column{
z-index: 1;
flex: 1.4 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
creates two classes with the
z-index
and exchange them in the click– Ricardo Pontual
How could I accomplish this with javascript? I don’t understand much of the language yet.
– Gustavo S. Rocha
use the property
classList
, see this: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList– Ricardo Pontual