Lite-Javascript Gallery - могу ли я расположить img абсолютно по отношению к <li>s? - PullRequest
Новая
       4

Lite-Javascript Gallery - могу ли я расположить img абсолютно по отношению к <li>s?

2 голосов
/ 09 июня 2010

У меня есть галерея изображений запуска lite-javascript.JavaScript захватывает каждый элемент <img> в списке и помещает его в качестве фона в родительский элемент <li>.Затем CSS стилизует миниатюры как небольшие блоки с определенной высотой / шириной.Событие click для каждого объекта <li> переключает видимость его дочернего элемента <img> и добавляет «активное» имя класса к <li>.Используя CSS, я пытаюсь разместить <img> абсолютно так, чтобы он отображался в одной и той же позиции для каждого большого пальца, но он перемещается относительно больших пальцев.

Вот CSS: 

#jgal li {
    background-position:50% 50%;
    background-repeat:no-repeat;
    border:solid #999 4px;
    cursor:pointer;
    display:block;
    float:left;
    height:60px;
    width:60px;
    margin-bottom:14px;
    margin-right:14px;
    opacity:0.5;
}

#jgal li img {
    position:absolute;
    top:0px;
    left:210px;
    display:none;
}

А на сайте: http://www.erisdesigns.net

Заранее спасибо за любую помощь!

Ответы [ 2 ]

1 голос
/ 09 июня 2010

, если вы хотите, чтобы <img> появлялся в той же позиции: 

#jgal {
  list-style: none outside;
  margin-top: 30px;
  position: relative;
  width: 200px;
}

#jgal li {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 3px solid #999999;
  cursor: pointer;
  display: block;
  float: left;
  height: 60px;
  margin: 0 14px 14px 0;
  opacity: 0.75;
  position: static;   // Need to specify static since you have style li { position: relative; } inside another css file
  width: 60px;
}

#jgal li img {
  border: medium none;
  display: none;
  left: 300px;
  position: absolute;
  top: 0;
}

Если вы хотите, чтобы img отображалось рядом с большим пальцем - измените положение: статическое; для положения: относительный; для #jgal li {

0 голосов
/ 09 июня 2010

position:absolute элементы основывают свое позиционирование на ближайшем родительском элементе с position:relative

Если вы хотите, чтобы изображение было относительно позиции <li>, все, что вам нужно сделать, это добавитьposition:relative; до #jgal li.

Если вы хотите расположить его относительно #jgal, вы можете вместо него применить position:relative и убедиться, что #jgal li равен position:static (по умолчанию, если вы не переопределите его где-нибудь)

...