Logica de incrementar posição com php para o html

Question

I have this command.

PHP

$id = 0;
$i = 0;
$vali = true;
$top1 = 0;
$top2 = 20;
$px = 'px';

$query = "select * from software where userid = '$id'";
$result = mysqli_query($conexao, $query);

$quantia = mysqli_num_rows($result);
for($i; $i< $quantia; $i++){
    $dado = mysqli_fetch_array($result);
    $_SESSION['teste'] = $dado["itens"];
    if($vali == true){
        echo "<div class='ts'> <style type='text/css'>.ts{top:$top1$px}</style>";
        echo $_SESSION['teste'];
        echo "</div>";
        $vali = false;
        $top1 += 20;
        
    }else{
        echo "<div class='ts2'> <style type='text/css'>.ts2{top:$top2$px}</style>";
        echo $_SESSION['teste'];
        echo "</div>";
        $vali = true;
        $top2 += 20;
    }
    
}

CSS

#section .section div .itens .ts{
    position: absolute;
    background-color: aqua;
    width: 100%;
    height: 20px;
}
#section .section div .itens .ts2{
    position: absolute;
    background-color: rgb(144, 184, 184);
    width: 100%;
    height: 20px;

}

HTML

<section id="section">
        <div class="section">
            <div>
                <div class="itens">
                        <?php include 'itens.php'?>
                </div>
            </div>
        </div>
</section>

Logica seems to be right, my idea is that depending on the amount of items you have in my database, go creating Ivs and playing down with css( top:20px ), but all end up being in the same position.

Divs are created correctly.

---

OBS, it’s not 20px, it’s 40px. I’m done with that.

Answer 1

Do not use position: absolute this makes the elements overlap, would need to manually define the position of each one, which in addition to bad is harder when you do not know how many items have, use display: inline-block to make each div occupy the entire line and stay below each other:

div.itens {
  display: block;
}

#section .section div .itens .ts{
    display: inline-block;
    width: 100%;
    height: 20px;
    margin-top: 5px
}

#section .section div .itens .ts1{
     background-color: aqua;
 }

#section .section div .itens .ts2{
    background-color: rgb(144, 184, 184);
}

<section id="section">
        <div class="section">
            <div>
                <div class="itens">
                  <div class='ts ts1'>teste1</div>
                  <div class='ts ts2'>teste2</div>
                  <div class='ts ts2'>teste3</div>
                  <div class='ts ts2'>teste4</div>
                </div>
            </div>
        </div>
</section>

I added a margin to make it visually easier to see the result, and to avoid duplicate code, I put the styles in common in the class "ts" and only the color in "ts1" and "ts2"