css Posicionar elemento: após aplicar margem, o conteúdo não aparece.

[leodiegoo 6]

Estou tentando posicionar os elementos fora da div aplicando uma margem negativa, mas quando faço isso, o elemento fica "por baixo" da div e não por cima.

 

Como gostaria que ficasse: (inputs)

 

Como realmente está ficando: 

 

Como pode ver pela seleção, o conteúdo está fora da div, mas não está aparecendo.

 

Tentativas:

já apliquei position:relative e coloquei um z-index: 2; no form para ficar em cima, mas não deu certo.

 

Alguém tem uma ideia? 

 

[joy_santos 1]

se tu colocar uma class dentro da tag input  com o z-index com um numero consideravelmente maior, também não dá certo? 

[leodiegoo 6]

57 minutos atrás, joy_santos disse:

se tu colocar uma class dentro da tag input  com o z-index com um numero consideravelmente maior, também não dá certo? 

 

Também não, olha: 

Veja que o input nome está mais pra esquerda e mesmo assim não aparece ele "do lado de fora".

 

A título de curiosidade, estou usando o modal SweetAlert2 (https://sweetalert2.github.io/)

[joy_santos 1]

8 minutos atrás, leodiegoo disse:

 

Também não, olha: 

Veja que o input nome está mais pra esquerda e mesmo assim não aparece ele "do lado de fora".

 

A título de curiosidade, estou usando o modal SweetAlert2 (https://sweetalert2.github.io/)

tu poderia usar uma div com fundo transparente só para os inputs e colocar ela acima dessa div com fundo branco, ai posicionando a div com os inputs mais pra esquerda eles vão certinho, é uma ideia, já que eu não tenho em mãos o seu código pra dar uma olhada 

[Omar~ 87]

Fiz um exemplo aqui, testa aí e ver se deu certo, porque não testei, mas a lógica é mais ou menos assim.

 

<style>
    body {background-color: black}
    .box-pai {
        position: relative; /* Para conter a posição absolute */
        width: 80%; /* 80% de largura para não cobrir a tela toda */
        min-height: 460px; /* Altura mímima do tamanho da box-fundo */
        margin: 10% auto; /* 10% de margim ao topo e altomatizar esquerda e direita (Centralizar) */
        border: 1px solid white /* Só para mostrar as delimitações */
    }
    .box-fundo {
        margin-left: 100px; /* Uma distância à esquerda para aplicar o efeito */
        background-color: red; /* Para mostrar */
        width: calc(80% + 100px); /* 80% da largura da box-pai mais os 100px de margim aqui aplicados */
        height: 460px /* Altura tem que existir para que funcione */
    }
    .box-dos-inputs {
        position: absolute; /* Para jogar essa box por cima da box-fundo */
        left 0; /* Á esqueda 0 para aplicar o efeito porque a box anterior está a 100px de distância */
        top: 60px; /* Para não ficar no ficar abaixo da box-fundo e dar uma distância do topo */
        width: 50%; /* Para mostrar uma largura qualquer */
        height: 340px; /* Altura menor para não ficar até o fim da box-pai */
        background-color: green /* Só para mostrar */
    }
</style>

<div class="box-pai">
    <div class="box-fundo"></div>
    <div class="box-dos-inputs"></div>
</div>