2

我有一个 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

提前感谢您的帮助！

4

2 回答 2

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李{

于 2010-06-09T09:12:44.537 回答
0

position:absolute元素的定位基于最近的父元素position:relative

如果您希望图像相对于<li>的位置，您需要做的就是添加position:relative;到#jgal li.

如果你想将它相对于 定位#jgal，你可以应用position:relative那里，并确保#jgal li是position:static（这是默认的，除非你在某处覆盖它）

于 2010-06-09T09:15:42.423 回答