CSS相对定位和绝对定位，忽略z-index

Question

我有一个网格，其中包含一些左浮动的li，具有固定的宽度和高度。问题在于当我悬停在中心的“最新产品”上时，显示的

没有被定位在顶部，而是位于下一个li下面。

编辑/突破： 如果我删除相对li上的z-index，在除IE7以外的所有浏览器中都可以正常工作。

- John Magnolia

---

寻找关于 z-index 在 IE7 中的特定信息。但如果在所有主流浏览器中都能正常工作，那么 IE7 用户就能够承受（他们应该几年前就升级了）。 - Kyle

Answer 1

尝试将鼠标悬停的LI的z-index更改为大于其兄弟节点，就像在你的productOver函数中所做的那样。

function productOver(){
  var product_html = $(this).find(".product_html");
  // Generate HTML only on first hover.
  if(product_html.data("generated") != true){
    var tis = $(this);
    product_html.find(".name").html(tis.find("h2").html());
    product_html.find(".price").html(tis.find(".price").html());
    product_html.data("generated", true);
  }
  $(this).css('z-index','10'); //add this
  product_html.stop().fadeTo('fast', 1).show();
}

当然，在 productOut 时将其设置回默认值

function productOut(){ 
  $(this).css('z-index', '8'); //add this
  $(this).find(".product_html").stop().fadeTo('slow', 0, function() {
    $(this).hide(); 
  });
}

- Wayne Austin

---

我在脑海中过于复杂化了它，这个方法非常有效，谢谢。 - John Magnolia

Answer 2

将 z-index: 1; 应用于底部行的 LIs，并将更高的 z-index 应用于所有在悬停时出现的元素。这样就可以让你开始了。

- Shomz

---

每个LI已经有了z-index:8，出现在悬停上的元素具有z-index:999。 - John Magnolia

我知道，但是给它们 z-index: 1 就解决了我的问题。 - Shomz