Div sobrepondo o slide

[lezão 0]

Ola boa tarde!

Td bem com vcs?

 

Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.

 

 

obrigado pela atenção.

[Omar~ 87]

 

1 hora atrás, lezão disse:

como fazer essas imagens ficar a frente do slideshow

Que imagens?

 

1 hora atrás, lezão disse:

qnd responsivo aparecer de 3 em 3

Qual resolução?

Quando que aparece em 3 em 3?

O que aparece em 3 em 3?

 

Faltou você apresentar um código, explicar de forma coesa seu problema e se possível uma imagem demostrando o resultado final.

 

Tente o "z-index" pois isso define a importância  de um elemento no documento.

[lezão 0]

Bom dia, Omar~!

Td bem com você?

 

 

Eu falo sobre estas 7 div's do quadrados  a frente da imagem de fundo, eu não tenho nenhum codigo ainda eu nem sei por onde começar, essa imagens eu tirei um print de um site.

E qnd eu disse 3 em 3 é referente a apresentação no responviso, no desktop as div's do quadrado aparece igual a foto abaixo, no celular gostaria que a div desses quadrados aparecessem  de 3 em 3 itens.

 

 

Espero q tenha entendido!

Obrigado pela sua atenção.

 

[lezão 0]

Boa tarde, a todos!

Consegui fazer algo, mas não estou conseguindo colocar as div uma do lado da outra.

vejam:

 

agora alinhar essa div para ficar como a imagem abaixo?

[Omar~ 87]

Atá, entendi...

Bom o que vai fazer é tentativa e erro.

Vamos usar um divisor pai e vários filhos dentro desse pai.

O divisor pai fica fixo na parte inferior da tela.

Mais ou menos assim:

<div class="pai">
  <div class="filho">1</div>
  <div class="filho">2</div>
  <!-- quantos filhos forem necessários -->
</div>

No pai damos as seguintes propriedades de CSS:

.pai {
  z-index: 1;
  position: fixed;
  width: 100%; 
  bottom: 0;
  left: 0;
  text-align: center
}

 

Os filhos é que fazemos a coisa acontecer, use uma calculadora para poder calcular sua largura dividindo 100 pela quantidade de filhos.

.filho {
  width: 12.5%; /* 12% já basta? */
  display: inline-block; /* Alinhando um ao lado do outro */
  padding: 1rem /* "1rem = 16px" quanto de espaçamento interno ? */
}

Por isso tentativa e erro, pois sua largura deve ser o suficiente para abrigar os demais componentes internos ao filho e ainda permiti-los que caibam em uma linha do divisor pai.

 

Agora a questão:

Em 21/09/2020 at 10:52, lezão disse:

no celular gostaria que a div desses quadrados aparecessem  de 3 em 3 itens

Use o media-query para redefinir a largura de cada filho de acordo com a resolução da tela.

Nesse caso aqui quando a resolução máxima não ultrapassar 600 pixels digo que a largura do filho passa a ser outra.

@media (max-width: 600px) {
  .filho {
    width: 6.25rem; /* 6.25rem = 100px */
  }
}