html - CSS 相对和绝对，忽略 z-index

Question

我有一个 li 的网格，它们都以固定的宽度/高度向左浮动。问题是当我将鼠标悬停在中心的最新产品上时，显示的 div 未定位在顶部并位于下一个 li 的

编辑/突破: 如果我删除相对 li 上的 z-index 这适用于除 IE7 之外的所有浏览器

Answer 1

尝试更改悬停的 LI 的 z-index 以使其大于它的 sibling ，就像在您的 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(); 
  });
}