Strumenti Jquery Sovrapposizione CSS Conflitto, Immagine posizionata sotto la sovrapposizione

Question

Per prima cosa ecco cosa sto usando e sto provando a fare:

l'impostazione minima per questo effetto: flowplayer.org/tools/demos/overlay/index.html

quindi l'effetto Anteprima di Apple Leopard: flowplayer.org/tools/demos/overlay/apple.html

Ora ecco la pagina con cui ho riscontrato il problema http://gentle-mist-64.heroku.com/pictures

Il mio problema: quando faccio clic su un'immagine l'immagine viene visualizzata sotto la sovrapposizione e sul lato destro,

Questo deve essere un conflitto tra il mio posizionamento CSS e il posizionamento del plugin.

quando provo questo su una pagina vuota senza layout, funziona perfettamente.

mio layout css:

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;
}

Chiunque ti aiuti. Voglio che questo plugin funzioni. Questo è molto meglio di un semplice plug-in light box. Ho utilizzato il plug-in su tutto il mio sito Web e vorrei continuare a utilizzarlo.

Apprezzo qualsiasi input, grazie. Ami

Answer 1

Ho scoperto che interamente per lo strumento jquery, è molto importante NON posizionare l'elemento jquery tools in un elemento padre posizionato in modo assoluto.

puoi semplicemente mettere la finestra, scorrevole o qualunque altra cosa fuori dal genitore assoluto.

meglio posizionarlo con float dove puoi.

Answer 2

Potresti provare a spostare photo0 e photo1 per non far parte degli altri div, ma invece non saranno influenzati da alcun stile genitore / ereditato? forse giù appena prima del tag </body> di chiusura?

Buona fortuna!

Answer 3

Grazie per questo indizio! Ho avuto un problema simile e alla fine ho scoperto che gli strumenti jquery stavano scrivendo l'immagine di sovrapposizione nella parte inferiore del corpo, il che significava che stava ottenendo uno stile leggermente diverso rispetto al div, che veniva creato in un punto diverso. Guardando il javascript che posiziona l'immagine lì, ho fatto la stessa cosa con il mio div overlay

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

Answer 4

Se vuoi mantenere i tuoi elementi posizionati, puoi effettivamente risolverlo spostando l'elemento di sovrapposizione, come suggerito da Funka. Vedi questa risposta:

overlay jquery posizionamento errato