Question

我有一个lite-javascript运行图库。 javascript会抓取列表中的每个<img>元素，并将其作为背景放在父<li>元素中。然后CSS将缩略图设置为具有定义的高度/宽度的小块。每个<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

提前感谢您的帮助！

Answer 1

如果您希望<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 {

Answer 2

position:absolute元素将其定位基于position:relative

Lite-Javascript Gallery - 我可以将img绝对与<li> s？</li>建立关系

2 个答案: