Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 :)
>
<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!
Vamos lá, é tudo uma questão de pais e filhos ai no código.
Se você tem essa estrutura, exemplo:
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.