Why don’t other Ivs show up?

Question

I put a div as relative, and the others inside as Absolute, but only div 3 is showing up because it’s the last I think, the problem is why they’re clustering like this?

<div id="ofertas">
    <ul>
        <div class="venda">
        <li>Casa 1</li>
        </div>


        <div class="venda">
        <li>Casa 2</li>
        </div>


        <div class="venda">
        <li>Casa 3</li>
        </div>


    </ul>
</div>

CSS code

body{
padding: 0;
margin: 0;
}
#ofertas{
height: 100%;
width: 20%;
background-color: grey;
position: relative;
}

 #ofertas ul li {
list-style: none;
 }

.venda{
position: absolute;
height: 150px;
width: 80%;
background: blue;
display: inline-block;
padding: 0;
margin: 0 auto;
margin-bottom: 50px;
}

Notice that only div 3 appears because it occurs?

Answer 1

Dude, is absolute positioning necessary? If you work with relative numbers (%) and absolute positioning, you will end up giving problem. In this example I took this position and simplified.

body {
  padding: 0;
  margin: 0;
}

#ofertas {
  width: 20%;
  background-color: grey;
  position: relative;
}

#ofertas ul li {
  list-style: none;
}

.venda {
  height: 150px;
  width: 80%;
  background: blue;
  display: inline-block;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 50px;
}

.vendaUm {
  background: red;
}

.vendaDois {
  background: green;
}

.vendaTres {
  background: yellow;
}

<div id="ofertas">
  <ul>
    <li class="venda vendaUm">
      Casa 1
    </li>


    <li class="venda VendaDois">
      Casa 2
    </li>


    <li class="venda vendaTres">
      Casa 3
    </li>


  </ul>
</div>