Alinhamento de imagem no canto do navegador.

[Joao Felix_147210 4]

Pessoal, tô precisando de uma ajudinha.

 

Preciso alinhar uma imagem no canto direito superior da tela, independente da resolução da tela, só que... eu declaro uma div que seria a div de referência da imagem como width: 100%;

 

Porém quando eu tento alinhar a imagem no canto da div, colocando o position como relative e o left como 70% (pelo que eu entendi ele alinha o lado esquerdo da imagem a 70% da div, então se colocar 100% ela estoura).

 

Resumindo, a minha dúvida é como fazer a imagem ficar alinhada exatamente a div 'pai' que está como width: 100% ?

 

Desculpa se já existe o tópico no fórum, dei uma pesquisada mas não encontrei, talvez esteja usando as palavras chaves erradas.

 

Obrigado a todos.

[mangakah 217]

Tente essas duas maneiras:

 

float: right

<style>
  div {
      width:100%;
  }
  
  img {
      position: relative;
      float: right;
  }
</style>
<div>
  <img src="test.png" width="257" height="211">
</div>

left: 100% + margin-left igual a width negativa da imagem

<style>
  div {
      width:100%;
  }
  
  img {
      position: relative;
      left: 100%;
      margin-left: -257;
  }
</style>
<div>
  <img src="test.png" width="257" height="211">
</div>

[Dian Carlos 29]

Se você quer deixar ela colada no canto, independente da resolução ou rolar do mouse faça da seguinte maneira

<style>
img.alerta{
 position: fixed;

 top: 50%;
 right: 0;

 height: 100px;

 margin-top: -50px;
}
</style>
<img class="alerta" src="imagem.jpg">

Assim a imagem vai ficar exatamente no meio da tela, mas colada na direita.

 

Mas se tu quer colocar ela relativa a alguma div, você que deixar a div em questão relativa, ou seja

 

<style>
div#caixa {
position: relative;

width: 500px;
height: 200px;

margin: 0 auto;

background: #39f;
}
img.alerta{
 position: fixed;

 top: 50%;
 right: 0;

 height: 100px;

 margin-top: -50px;
}
</style>
<div id="caixa">
<img class="alerta" src="imagem.jpg">
</div>

Assim a imagem, ou qualquer outro elemento que você colocar ficará relativo a div anterior..

 

Tenta ae, boa sorte.

[Joao Felix_147210 4]

Valeu pessoal, setei a propriedade float: right;

 

e resolveu o problema.

 

Obrigado mesmo pelas respostas.