JQuery Tools Overlay CSS Konflikt, Bild unter der Auflage positioniert

Question

Zuerst ist hier, was ich verwende und versuchen zu tun:

die minimale Setup für diesen Effekt: flowplayer.org/tools/demos/overlay/index.html

dann das Apple Leopard Vorschau Effekt: flowplayer.org/tools/demos/overlay/apple.html

Jetzt ist hier die Seite, die ich das Problem habe mit http://gentle-mist-64.heroku.com/pictures

Mein Problem: wenn ich auf ein Bild klicken zeigt das Bild unter dem Overlay und auf der rechten Seite,

Dies hat ein Konflikt zwischen meiner CSS-Positionierung auf das das Plugin Positionierung sein.

wenn ich versuche, diese auf einer leeren Seite ohne Layout, es funktioniert gut.

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

Wer bitte helfen. Ich möchte dieses Plugin arbeiten. Das ist so viel besser als nur eine Lichtbox Plugin. Ich habe das Plugin über meine gesamte Website verwendet und möchte mit ihm halten.

Ich schätze jede Eingabe, danke. Ami

Answer 1

Ich fand heraus, dass ganz für jquery Werkzeug, ist es sehr wichtig ist, nicht das jquery Werkzeug Element in einem übergeordneten Elemente zu platzieren, die absolut positioniert ist.

Sie können einfach aus dem Fenster setzen, scrollbaren oder Seite was auch immer aus dem absoluten Elternteil.

am besten mit Schwimmern zu positionieren waren Sie können.

Answer 2

Könnten Sie versuchen photo0 und photo1 bewegt sich nicht in Ihrem anderen divs zu sein, sondern so dass sie nicht durch Eltern / geerbt Arten beeinflusst werden gehen? vielleicht nach unten kurz vor dem Schließen </body> Tag?

Viel Glück!

Answer 3

Danke für diesen Hinweis! Ich hatte ein ähnliches Problem und fand schließlich, dass Jquery Tools wurde das Overlay-Bild an der Unterseite des Körpers auszuschreiben, was es bedeutete, war etwas anders Styling als die div bekommen, die an einer anderen Stelle geschaffen wurde. Mit Blick auf die Javascript, die das Bild dort platziert, ich tat das Gleiche mit meinem Overlay div

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

Answer 4

Wenn Sie Ihre Elemente positioniert behalten möchten, können Sie es tatsächlich lösen, indem das Overlay-Element zu bewegen, wie durch Funka vorgeschlagen. Sehen Sie diese Antwort:

jquery Overlay falsche Positionierung