标签: z-index

我正在开发一个网页，但我遇到了 z-index 无法按预期工作的问题。我的结构是这样的：

<div class="mainWrapper">
    <div class="overlay"></div>
    <div class="main">
        <div class="content1">
            content goes here
        </div>
    </div>
</div>

在叠加层中，我有一张图片应该在主类之上，但在内容类之下。我试过简单地添加不同的 z-indexes，但它似乎不起作用。我怎么解决这个问题？这是因为overlay-div 在其他div 之外吗？

我在以div包裹的页面上有多列是这样的：

<div class="first column" style="width:33%; float: left;"></div>
<div class="column" style="width:33%; float: left;"></div>
<div class="last column" style="width:33%; float: left;"></div>

我基本上使用的是一个插件，该插件可以对文本进行分栏并将其从左到右放置。在我的CSS中，我将它们重新放置，使它们彼此堆叠，然后使用一些jquery将每一列移开。问题是，它们以错误的顺序堆叠。最后一栏是第一栏，第一栏在底部。

这是CSS

#reader .column {
    position:absolute;
    top:0;
    left:0;
    background:#fff;
}

我该怎么做才能改变堆叠顺序？是使用jQuery向每个div添加z-index的最佳解决方案？我并不是完全做到这一点，JS不是我的强项。对我来说，这似乎还很脆弱。有没有一种方法可以简单地颠倒堆叠顺序？这是我非常简单的jQuery：

$(function(){
    $('#reader-inner').columnize();
    $('.column').click(function() {
      $(this).clearQueue().animate({left:'-550'},500, 'swing');
    });
});

当我将鼠标悬停在元素上时，工具提示会显示在元素下方。元素的 z-index 为 2，而工具提示为 1030。我不确定发生了什么。它也仅适用于某些元素，即使它们具有相同的标记。

这是它在http://darebounty.com/streams/11上发生的页面

它是底部页面上的形状（红色、蓝色、黄色等）#rune_page_view

任何帮助，将不胜感激。

我在这里有这个页面:http://artendijen.com/product/animals-stream/并且右侧有链接,但是我无法点击它们...有谁知道为什么？

左边:

<nav class="woocommerce-breadcrumb" itemprop="breadcrumb"><a class="home" href="http://artendijen.com">Home</a> / <a class="home" href="/shop">Gallery &amp; Shopping</a> / <a href="http://artendijen.com/product-category/small/#108">Small</a> / Animals by the Stream</nav>

右边:

<ul style="float:right;" class="shoppingBread"><li><a href="/product-category/prints-notecards">Prints &amp; Notecards</a></li><li><a href="/product-category/background-information">Background Information</a></li><li><a href="/cart">Cart</a></li></ul>`

左侧的CSS:

.woocommerce .woocommerce-breadcrumb, .woocommerce-page .woocommerce-breadcrumb {
    float: left;
    z-index: 99999;
    position: relative;
    margin: 0 0 1em;
    padding: 0;
    font-size: .92em;
    color: #777;
}

右侧的CSS只是向右浮动,但这里是右侧列表项的CSS:

.shoppingBread li {
    padding-bottom: 5px;
    text-align: right;
}

我有几个产品与z-index相互重叠.

我试过这个.

$(document).on('mouseover', '.product', function(e) { 
    prod_id = $(this).attr('id');               //Each product has an id
    prod_zindex = $(this).css('z-index');       //Store z-index when hovered
    $(this).css('z-index',50000000);
});

//Restore z-index when moving from product
$(document).on('mouseout', '.product', function(e) { 
    $('#' + prod_id ).css('z-index',prod_zindex);        
});

prod_id并且prod_zindex是全局变量

我想要发生的事情是,应该将悬停的产品设置为最高的z-index,但是当我离开时,我希望将更改的z-index恢复为原始的z-index.

显然我做错了什么.我想这是因为我无法控制mouseover/mouseout - 事件将要执行的顺序.

处理这种情况的最佳方法是什么？产品的"原始"状态类似于z-index = 0,z-index = 1,z-index = 2等.

请给我任何提示/指示......

UPDATE

澄清: 在正常情况下我可以.product:hover在css中使用,但在这种情况下它将没有效果,因为z-index在每个产品上都是内联设置的(并且它必须是这样的)

如果我将鼠标悬停在 DIV 上，我希望在我的 DIV 容器下放置一个弯曲的阴影。不幸的是，阴影在我的盒子上方而不是下方。有什么建议？

这是我的 CSS：

.appointment {
    position: relative;
    z-index: 1000;
    padding: 5px;
    border: 1px solid #BBBBBB;
    cursor: pointer;
    transition: all 0.5s;
    background: #FFFFFF;
}

.appointment:hover {
    transform: scale(1.1);
}

.appointment:hover:after {
    content:'';
    position: absolute;
    z-index: -1;
    top: 20px;
    width: 100px;
    height: 45px;
    background: #000000;
    transform: rotate(-5deg);
}

HTML：

<div class="appointment">
    <div class="desc">
        <div class="app-date">07.10.2014</div>
        <div class="app-location">Bamberg, Bayern</div>
    </div>
</div>
<div class="appointment" >
    <div class="desc">
        <div class="app-date">08.10.2014</div>
        <div class="app-location">Hamburg, Hamburg</div>
    </div>
</div>

JSFiddle

它应该是这样的：

我有3个元素：

<div class="foo"></div>
<div class="bar"></div>
<div class="foobar"></div>

我想.foo重叠.bar，.bar重叠.foobar，.foobar重叠.foo。

像这样：

可以用 CSS 吗？

如何找到元素的堆叠上下文？或者，如何找到控制z-index后代的元素的祖先元素？

我有一个非常复杂的页面，其中包含嵌套表，div。并z-index隐藏了一个绝对高的盒子。

在通过有条不紊地遍历元素的祖先，直到找到在何处添加z-index值和位置值以创建新的堆栈上下文之前，我已经解决了这些问题。

但是我似乎无法以这种方式解决这个问题。

是否有一个工具（在浏览器的开发人员工具中或在Javascript中）可以在其中提供element的工具A，并且它返回类似以下内容：

“元素A是从元素B开始的堆栈上下文的一部分，元素B是从元素C开始的堆栈上下文的一部分，元素C是页面的根堆栈上下文的一部分”

帮帮我，你是我唯一的希望。

在决定 HTML 中元素的堆叠顺序时z-index，它们之间的opacity关系如何？

当我保持opacity少于1某个有z-index发言权的元素时999。该元素位于没有z-index.

$(function() {
  $("#checkbox1").on("change", function() {
    $("#green-parent").toggleClass("add-opacity", this.checked);
  });
});

.green,
.blue {
  position: absolute;
  width: 100px;
  line-height: 100px;
  text-align: center;
  color: white;
}
.green {
  z-index: 999999999;
  top: 50px;
  left: 50px;
  background: green;
}
.blue {
  top: 60px;
  left: 90px;
  background: blue;
}
.add-opacity {
  opacity: 0.99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input id="checkbox1" type="checkbox" value="1">
<label for="checkbox1">Add opacity to green box parent</label>


<div …

我对使用z-index决定堆栈顺序感到有点困惑.

我不太明白浏览器如何将带有position属性的元素与没有它的元素一起处理.

是否有一般规则来决定元素的堆栈顺序是否已明确定位元素？

赞赏不同情况的例子.一般来说:

1. <div>具有位置设定且没有位置设定的混合兄弟姐妹.
2. 嵌套<div>s与兄弟s混合,<div>位置设置且没有位置设置.