Div sobrepondo a outra

Estou usando essas duas divs, no caso ela teriam que ficar uma embaixo da outra, mas esta acontecendo isso, como eu resolvo?

<div class="valorAss col-sm-2">
    <div class="total1">valor1</div>
    <div class="total2">valor2</div>
</div>

.valorAss{ 
   float: right;
   position: relative;
  height: 20%;
}

.selAss{
 float: left;
 }

.total1{
 height: 20%;
 padding: 2%;
 text-align: center;
 position: absolute;
 top: 0;
}

.total2{
 height: 20%;
 padding: 2%;
 text-align: center;
 position: absolute;
bottom: 0;
z-index: 50;
}

Bom dia!

Já tentou passar um valor maior para o padding da sua 2° div ?

Exemplo:

.total1{
 height: 20%;
 padding: 5%;
}

.total2{
 height: 20%;
 padding: 15%;
}
2 curtidas

Oi boa tarde, eu tentei agora, ela saiu de cima da outra, ela foi mais para cima.
Ainda não deu certo rs

Tenta fazer processo inverso, passa um valor maior para a primeira DIV e um valor menor para segunda DIV.

1 curtida

Não seria devido as classes .total1 e .total2 terem a mesma posição absoluta? com uma ligeira elevação parao valor 2.

Experimente position: relative

1 curtida

ainda não deu certo hehe com a mudança da posição não estão mais em cima uma da outra, mas a div total2 não esta no bottom

O padrão de uma div é ser blocante. Logo, elas se apresentariam uma abaixo da outra!
Penso eu, que os seus “position” estão prejudicando a apresentação, nesta questão.

1 curtida

@annyk pelo o que você pediu, é só você retirar estes css. Repare que você está utilizando class do bootstrap ele irá fazer o que você quer uma div abaixa da outra.

EDIT: Se não estiver usando bootstrap (col-sm-2) me corrige. =)

1 curtida

Estou usando sim rs, mas resolveu o que a Maria Eduarda falou resolveu o meu problema rs, retirei os position e funcionou!

Obrigada a Todos :wink:

1 curtida