ferramentas jQuery Overlay CSS Conflito, Imagem posicionado sob a sobreposição

Question

Em primeiro lugar aqui é o que eu estou usando e tentando fazer:

a configuração mínima para este efeito: flowplayer.org/tools/demos/overlay/index.html

então a Apple Leopard pré-visualização Effect: flowplayer.org/tools/demos/overlay/apple.html

Agora aqui é a página que eu estou tendo o problema com http://gentle-mist-64.heroku.com/pictures

Meu problema: quando eu clicar em uma imagem A imagem mostra sob a sobreposição e para o lado direito,

Este tem que ser um conflito entre o meu posicionamento CSS para o posicionamento do plugin.

quando eu tente isso em uma página em branco sem layout, ele funciona muito bem.

meu css de layout:

body {
  background: url('/images/background.jpg');
}

#image_stage {
  position: relative;
  top: 30px;
  margin: auto;
  margin-top: 75px;
  background-color: white;
  width: 900px;
  height: 520px;
}

#image_inside_stage {
  float: left;
  margin-top: 7px;
  margin-left: 27px;
}

#logo {
  position: absolute;
  left: 725px;
  top: 4px;
}

#see_through_box {
  position: absolute;
  background-color: black;
  opacity: 0.66;
  -moz-opacity: 0.66;
  filter:alpha(opacity=66);
  width: 665px;
  height: 432px;
  margin: 45px;
  z-index: 99;

  -moz-border-radius-topleft: 15px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-bottomright: 15px;

  -webkit-border-top-left-radius: 15px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 15px;
}

.inner_content {
  position: absolute;
  top: 75px;
  left: 75px;
  z-index: 99;
  color: whitesmoke;
}

Por favor, alguém ajuda. Eu quero este plugin para o trabalho. Isto é muito melhor do que apenas uma caixa de plug-in de luz. Eu tenho usado o plugin em todo o meu site e gostaria de continuar a usá-lo.

Eu aprecio qualquer entrada, obrigado. Ami

Answer 1

Eu descobri que inteiramente para a ferramenta jQuery, é muito importante não colocar o elemento ferramentas jQuery em um elemento pai que é absolutamente posicionado.

você pode simplesmente colocar a janela, rolagem, ou qualquer outra coisa fora do lado do pai absoluto.

melhor posição com flutuadores foram puder.

Answer 2

Você poderia tentar mover photo0 e photo1 a não ser dentro de seus outros divs, mas em vez disso para que eles não vão ser afectados por quaisquer / estilos herdados de pais? talvez até um pouco antes da tag de fechamento </body>?

Boa sorte!

Answer 3

Obrigado por essa dica! Eu tive um problema semelhante e, finalmente, descobriu que ferramentas jQuery estava escrevendo a imagem de sobreposição na parte inferior do corpo, o que significava que estava ficando um estilo um pouco diferente do que a div, que estava sendo criado em um local diferente. Olhando para o javascript que coloca a imagem lá, eu fiz a mesma coisa com a minha sobreposição div

$('body').append($('#mortgage_card'));

Answer 4

Se você quiser manter os seus elementos posicionado, você pode realmente resolver isso movendo o elemento de sobreposição, como sugerido por Funka. Veja esta resposta:

jquery sobreposição posicionamento errado