Div sobrepondo a outra

Front-end
#1

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;
}
#2

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
#3

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

#4

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

1 curtida
#5

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
#6

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

#7

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
#8

@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
#9

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