Jump to content
Sign in to follow this  
jonathanrn

Posicionamento relativo a imagem

Recommended Posts

Boa noite galera, blz?

 

 

Então, estou tentando aprender sobre posicionamento, decidi fazer algo para testar meu conhecimento e tomei no c# kkkk.

 

Queria que as imagens vermelhas fossem alinhadas relativamente à imagem azul com (Right, Left, Bottom e Top): http://imgur.com/m13i2ss (link do exemplo, não consegui subir imagem por aqui o.O).

 

Eu consegui fazendo as imagens vermelhas usando position: absolute; mas elas se alinham relativamente a div container, e não a imagem, fico com a sensação de errado.

 

Qualquer ajuda é bem vinda, desde já agradeço :)

 

 

Share this post


Link to post
Share on other sites

Vamos lá, é tudo uma questão de pais e filhos ai no código.

Se você tem essa estrutura, exemplo:

<div class="container">
   <img name="vermelha" src="#">
   <img name="vermelha" src="#">
   <img name="vermelha" src="#">
   <img name="vermelha" src="#">
   <img name="vermelha" src="#">

   <img name="azul" src="#">
</div>

O position tende a deixar eles relativos ao container (absolute) e não a imagem azul, isso porque a imagem azul faz parte do conjunto de filhos e não é um pai das demais.

Você consegue tornar a imagem azul um pai das imagens vermelhas? Consegue.

Eu não vou conseguir te ajudar com códigos (precisaria que você postasse o que já conseguiu fazer pra que consigamos dar uma olhada).

Bem, explique também onde quer chegar e como quer deixar essa estrutura, assim fica mais fácil de acharmos uma solução.

Share this post


Link to post
Share on other sites
<div class="container">
   <img name="vermelha" src="#">
   <img name="vermelha" src="#">
   <img name="vermelha" src="#">
   <img name="vermelha" src="#">
   <img name="vermelha" src="#">

   <img name="azul" src="#">
</div>

Consegui, usando essa estrutura html fica mais ou menos assim:

 

1 - Deixei o tamanho da div pai no mesmo tamanho da imagem azul;

2 - Passei a imagem azul para cima das vermelhas;

3 - Com absolute nas imagens vermelhas usei top e left para alocar em suas posições;

 

-- já consegui o que queria --

 

4 - Usei animation para depois de alguns segundos as imagens vermelhas voltarem para baixo da imagem azul (top: 0; left:0) .

 

Assim que terminar posto o código!

  • +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
Sign in to follow this  

  • Similar Content

    • By Dallas20
      Então pessoal,  estou fazendo um pequeno projeto para me aperfeiçoar em javascript e acabei me deparando com o seguinte problema. Eu queria pegar o valor de um input quando o usuário desse um click em um botão e isso foi simples de fazer, porém ao utilizar conceitos de POO e aplicando classes no javascript não consigo fazer essa ação. Gostaria de saber se isso é possível? E como fazer?
       
      Segue o code HTML:
      <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta name="author" content="Dallas"> <meta http-equiv="refresh" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../CSS/withdrawal.css" rel="stylesheet"> <script src="../javascript/withdrawal.js"></script> <title>Banco do Brasil</title> </head> <body> <h1>Quanto deseja sacar ?</h1> <input type="number" id="cashInReal"> <button type="button" onclick="alter()"> AQUI</button> </body> </html> code javascript:
      class withdrawal { alter() { alert(document.getElementById('cashInReal').value); } } Desde já muito obrigado.
       
      Att. Dallas
    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
×

Important Information

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