Customization and z-Index

Question

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;

}

Answer 1

I looked at your code and I did it in a way here that we won’t touch the property z-index but on the property display of their containers.

But first let’s get your CSS sorted so the containers are in the center of the page.

1. In class .container take the statement margin-top: -170px;.
2. In the classes .first-content and .Second-content take the statement position: absolute;
3. In class .first-content change the diplay to None, like this: diplay: none;
4. Leave the body with the margins zeroed, like this: body { margin: 0; }

That should be enough to get everything centered the way you want it.

---

Now let’s make a script to perform the "exchange" of containers when the button MOVE FORWARD is clicked. At the end of your code, a line before the </body>, adds the following script:

<script>
  function trocaDiv(){
    event.preventDefault();
    var firstContent = document.getElementsByClassName("first-content")[0];
    firstContent.style.display = 'flex';
    var secondContent = document.getElementsByClassName("second-content")[0];
    secondContent.style.display = 'none';
  }
</script>

Then on the button tag MOVE FORWARD, you’ll have to add onclick="trocaDiv()". Thus remaining:

<p><a class="btn btn-grey-avancar" href="registrarDespesas.php" style="text-decoration:none;" onclick="trocaDiv()">avançar</a></p>

Only this I believe will be enough to run the way you expect, but in addition there are some other mistakes. This screen works well on a large monitor, but has no responsiveness to smaller monitors. But running the way you expect it’s already a good thing, then you can go after make it more responsive.

I hope I helped, any doubt calls there.

Hugs.