Jump to content
leodiegoo

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

Recommended Posts

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)

image.png.2c7ceaf1c2166e4a03dced903dee12c8.png

 

Como realmente está ficando: 

image.png.1620f5e849595f10ff9aef910b487950.png

 

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? 

 

Share this post


Link to post
Share on other sites
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: 

image.png.80acf6dbf59c8187ecb00ea999ac7550.png

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/)

Share this post


Link to post
Share on other sites
8 minutos atrás, leodiegoo disse:

 

Também não, olha: 

image.png.80acf6dbf59c8187ecb00ea999ac7550.png

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 

  • +1 1

Share this post


Link to post
Share on other sites

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>

 

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Alexandre Lex
      Boa tarde pessoal,
       
      Eu sou iniciante em programação PHP, e estou com dificuldades em entender um comportamento. Já dei uma pesquisada pelo fórum mas não encontrei um assunto semelhante. Estou desenvolvendo um projeto onde estou organizando as páginas em pastas separadas.
       
      Ilustração:
       
      -Root
       -css
           - config.css
       -img
           - imagem01.jpg
      - js
           - config.js
       -conteudo01
            - pagina01.php
       -conteudo02
      footer.php
      header.php
      index.php
       
      O que ocorre é que dentro da pasta conteudo01, dentro do arquivo pagina01.php eu uso a função include_once para chamar as páginas principais do root normalmente. Até ai tudo bem, o problema é que o servidor não está carregando os conteudos das demais pastas. Já fiz de tudo e um pouco até o presente momento dentro dos limites do meu conhecimento, mas sem sucesso. Gostaria da ajuda dos senhores para a resolução do meu problema. Sou grato desde já.
       
      Atenciosamente,
       
      Alexandre Figueiredo
    • By ThosuZ
      Olá, pessoal! Estou com problemas pra organizar meu rodapé. Quero deixar da seguinte forma: as informações de contato e um formulário lado a lado, e em baixo as informações padrões de um rodapé ("Copyright 2020 etc").
       
      Eu criei uma div pras informações de contato e outra pro formulário, setei float: left e right pra eles respectivamente, mas a terceira div (Copyright) ficou no meio, não em baixo. Como resolvo?
       
      HTML:
       
      <footer> <div class="fcenter"> <div class="infos"> <p class="ftitulo">Águia Publicidade</p> <p class="finfos">Rua Treze de Maio, 191</p> <p class="finfos">Ed. Marc Jacob, sala 504</p> <p class="finfos">(91) 99182-4761</p> <p class="finfos">contato@aguiapublicidade.com</p> </div> <div class="contato"> <p class="ftitulo">Contate-nos</p> <form action="enviar.php" method="post" class="rodape"> <p class="formu">Nome: </p><input type="text"> </form> </div> </div> <div class="copyright"> <p class="rodape">&copy; Todos os direitos reservados. Desenvolvido por Arthur, designer da Águia&reg; Publicidade.</p> </div> </footer> CSS:
      /* footer settings */ footer { background-color: #303030; color: #fff; margin: 0px -8px 0px -8px; } .fcenter { width: 500px; margin: 0 auto; } .infos { float: left; } .contato { float: right; }  
      Como ficou:

       
      Como eu gostaria que ficasse mais ou menos:
      http://miritigrafica.com.br/#faleconosco
    • By Herberto Silva
      Olá
      Estou com uma dificuldade em elaborar um select de forma que verifique um campo data, (com uma atribuição de uma variável $current_date = date('Y-m-d');) caso exista essa data o select posicione-se no registo, neste caso no registo que contém a data igual a $current_date, mantendo os restantes registos da tabela disponíveis
    • By Gniusplay
      Olá pessoal, eu tenho um sistema de comentários que quando um "player" preenche esse comentário, ele vai direto para pagina inicial, funciona como um feedback, só que ele pode usar isso várias e várias vezes, eu queria que ele usasse apenas uma vez e não pudesse mais utilizar, sendo assim só seria possível usar uma vez.
      Ou q só poderia usar se tivesse x quantidades de pontos no banco de dados(eu tenho uma coluna com pontos) e a cada vez que ele usasse esse formulário(comentário), ele perderia 1 ponto,e  quando não tivesse mais pontos, ele não poderia comentar.
      Alguém tem alguma ideia de como posso fazer isso? e qual funções utilizar?
      VALEUU!!!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.