Ir para conteúdo
Fórum Script Brasil
  • 0

Como separar um bloco de divs que estão sobrepostas (Vue.JS)


Samuel Maciel

Pergunta

Eu fiz um componente que consiste em uma caixa que vai ser exibida dentro do meu background. Eu preciso de 4 dessas caixas e para isso, usei o v-for para não precisar criar 4 componentes basicamente iguais. Só que, com isso, as caixas não estão ficando posicionadas corretamente e o meu fundo não acompanha a adição de componentes na tela. Defini a position do componente (box) como absoluta já que foi a única maneira de colocá-las dentro do background, contudo, as 4 caixas ficam sobrepostas e eu preciso de movê-las pela tela. As demais posições fazem com que elas fiquem a cima do fundo, num espaço em branco da tela. Como posso resolver isso? Não gostaria de criar componentes iguais para resolver esse problema.

Background CSS:

<style>
*{
  margin: 0;
  padding: 0;
}
.background{
    height: 100vh;
    background-color: #3B3B3B;
}
.title{
    border: 1px solid #707070;
    border-left: none;
    border-right: none;
    padding-top: 5em;
    
}

.title h2{
    text-align: left;
    color: #B16DFF;
    padding-top: 0.8em;
    font-size: 2em;
    padding-bottom: 0.5em;
    margin-left: 1.5em;
    font-weight: 600;
}

@media(max-width: 600px){
  .title h2{
      font-size: 1.17em;
  }
}

</style>

Component (box) CSS:

<style scoped>
*{
    margin: 0;
    padding: 0;
}

.box{
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index: 10;
    width: 45em;
    height: 30em;
    margin-left: 1.5em;
    margin-top: 12em;
    background-color: #232323;
   
}
.title{
    border-bottom: 1px solid #707070;
}
.title p{
    padding: 0.2em 0.8em;
    font-size: 1.5em;
    font-weight: 600;
    color: white;
    text-align: left;
}

</style>

Vue.App CSS:

<style>
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    }
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;

}

 

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...