1

Estou desenvolvendo um mapa interativo e preciso posicionar algumas imagens dentro dele, estou usando as propriedades top e left para posicionar o elemento, o problema é que a posição muda em resoluções diferentes. O mapa está como background do corpo body e size cover.

4
  • Como você precisa posicionar? Qual o resultado esperado? Qual código você já usou? Pode compartilhar? Precisamos saber o que você já tentou, o que você tem no momento e o que você pretende fazer para podermos ajudar. 7/11/2015 às 15:47
  • @CelsomTrindade imagine qualquer lugar do corpo para o posicionamento, preciso colocar o elemento nesse lugar usando qualquer unidade de medida, estou usando pixels pelas propridades top e left no CSS, isso ja foi feito, o problema e que em diferentes telas de computador os elementos posicionados em cima do mapa estao em localizações diferentes das que coloquei, não acho necessario postar trechos do codigo.
    – Junior CT
    7/11/2015 às 15:55
  • Sim, isso eu entendi. Mas eu não consigo adivinhar como você está trabalhando para tentar uma solução. Mas acredito que você deva utilizar a imagem com um tamanho fixo para que o posicionamento seja sempre o mesmo, alterando somente quando ultrapassar um determinado @media. Mas compartilhe o seu código para analisar melhor 7/11/2015 às 16:00
  • @CelsomTrindade eu não estou com o codigo original aqui, mas fiz um exemplo com a mesma estrutura: pastebin.com/4mFQpbPc
    – Junior CT
    7/11/2015 às 16:13

1 Resposta 1

3

O seu problema ocorre pois a imagem de fundo vai ser adaptável para cada resolução, o que seria inviável de fazer as marcações com um position absolute.

Veja esse exemplo que recria a sua situação: jsfiddle

A solução seria deixar a imagem dentro de uma div com tamanho fixo, assim as suas marcações irão funcionar e irão se manter.

Veja este exemplo funcionando: jsfiddle

A marcação no estado de São Paulo é fixa, não importa a resolução.

O procedimento para tornar isso responsivo, seria criar alguns tamanhos pré estabelecidos conforme suas @media.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .