Lite-Javascript Gallery - 我可以绝对定位 img 与 <li> 的关系吗？答案

【问题标题】：Lite-Javascript Gallery - Can I position the img absolutely in relationship to the <li>s?Lite-Javascript Gallery - 我可以绝对定位 img 与 <li> 的关系吗？
【发布时间】：2010-06-08 20:09:53
【问题描述】：

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

提前感谢您的帮助！

【问题讨论】：

谢谢马塞尔。嘿，我很快就要给你买午餐了！
哈哈，不错！但重点是：你明白了吗？这些标签被这个网站吃掉了，所以你应该把它们放在backticks中。并且不要忘记在您的 cmets 中使用 @user-name，所以我们会得到 notified。
@Marcel Korpel 我愿意，我愿意！我很感激你的指导。谢谢！
这个标题有点混乱，你想要<img> 相对于<li> 还是其他一些父容器，比如#jgal？

标签： javascript css image-gallery

【解决方案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 {

【讨论】：

是的，这就是我所缺少的。感谢您的帮助！

【解决方案2】：

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

如果您希望图像相对于<li> 的位置，您只需将position:relative; 添加到#jgal li。

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

【讨论】：