Инструменты Jquery Overlay CSS Conflict, Изображение расположено под оверлеем - PullRequest
Новая
       5

Инструменты Jquery Overlay CSS Conflict, Изображение расположено под оверлеем

1 голос
/ 12 сентября 2009

Сначала вот что я использую и пытаюсь сделать:

минимальная настройка для этого эффекта: flowplayer.org/tools/demos/overlay/index.html

затем Эффект Apple Leopard Preview: flowplayer.org/tools/demos/overlay/apple.html

Теперь вот страница, с которой у меня проблема http://gentle -mist-64.heroku.com / фото

Моя проблема: когда я нажимаю на изображение, изображение отображается под наложением и справа

Это должен быть конфликт между моим позиционированием CSS и позиционированием плагина.

Когда я пытаюсь сделать это на пустой странице без макета, она работает просто отлично.

мой макет 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;
}

Кто-нибудь, пожалуйста, помогите. Я хочу, чтобы этот плагин работал. Это намного лучше, чем просто плагин лайтбокса. Я использовал плагин для всего своего веб-сайта и хотел бы продолжать его использовать.

Я ценю любой вклад, спасибо. Ами

Ответы [ 4 ]

0 голосов
/ 29 апреля 2010

Если вы хотите сохранить свои элементы позиционированными, вы можете решить их, переместив оверлейный элемент, как рекомендует Funka. Смотрите этот ответ:

Наложение jquery неправильное позиционирование

0 голосов
/ 16 апреля 2010

Спасибо за эту подсказку! У меня была похожая проблема, и в итоге я обнаружил, что jquery tools выписывает оверлейное изображение в нижней части тела, что означает, что его стиль немного отличается от стиля div, который создается в другом месте. Глядя на javascript, который помещает туда изображение, я сделал то же самое с моим оверлеем div 

$('body').append($('#mortgage_card'));
0 голосов
/ 17 апреля 2010

Я обнаружил, что полностью для инструмента jquery очень важно НЕ размещать элемент инструментов jquery в родительском элементе, который расположен абсолютно.

Вы можете просто поместить окно, прокрутку или что-либо вне абсолютного родителя.

лучше всего позиционировать с помощью поплавков, где вы можете.

0 голосов
/ 13 сентября 2009

Не могли бы вы попробовать переместить photo0 и photo1, чтобы они не входили в другие ваши дивы, но вместо этого, чтобы на них не влияли какие-либо родительские / унаследованные стили? возможно вниз перед закрывающим тегом </body>?

Удачи!

...