Question

我有一个比之前的div更高的z-index的div，但是，具有更高z-index的div将在它之后的div之后。

$(document).ready(function(){
  $("#menu-button").click(function(){
    $("#menu").show(1000, function() {
      $("#option1").show(1500, function() {
        $("#option2").show(1500, function() {
          $("#option3").show(1500, function() {
            $(":not(#menu)").click(function(){
              $("#menu").hide(100);
            });
          });
        }); 
      });
    });
  });
});

html, body{ height:100%; width:100%; padding:0; margin:0; overflow-x: hidden;}
#body{background:#333333; height: 100%; z-index:-5;}
#rotate{transform: rotate(5deg); background:#666; width:100%; height: 100%; position:absolute;}
.hidden{
  display: none;
}
.mobMenu{
  height:100%;
  width:35%;
  background:#006666;
}
.btn{
  background:#039;
}
.page{
  border:0;
  padding:0;
  width:100%;
  z-index:3;
  float: left;
  height: 100%;
}

<body id="body">
  <div id="rotate"></div>
  <div class="page">
    <span id="menu-button" style="color:#FFF;">TEST</span>
    <div class="mobMenu hidden" id="menu">
      <button class="hidden" id="option1">1</button>
      <button class="hidden" id="option2">2</button>
      <button class="hidden" id="option3">3</button>
    </div>
  </div>
</body>

我认为div“旋转”会在div“页面”后面，但是，情况似乎并非如此。

我想使用旋转的div作为背景，并且让它在用户滚动时不会删除旋转的框背景。

（顶部的脚本只是出于任何原因影响任何事情）

Answer 1

如visual formatting model documentation中所述，z-index属性only applies to positioned elements。在您的情况下，.page元素的默认position值为static，这意味着z-index不会影响该元素。

如果您定位元素，方法是将position值更改为relative / absolute / fixed，那么它将按预期工作。

.page {
    border: 0;
    padding: 0;
    width: 100%;
    float: left;
    height: 100%;
    z-index: 3;
    position: relative; /* Added. */
}

Answer 2

来自http://www.w3schools.com/cssref/pr_pos_z-index.asp：

z-index仅适用于定位元素（位置：绝对， position：relative，或position：fixed）。

您的.page未定位。

此外，您似乎没有在z-index上专门设置#rotate。您可能不需要它，但我建议给它{2}或更低的z-index。

您认为z-index上需要#body -5的原因？

Answer 3

我已更新以下CSS：

#body{background:#333333; height: 100%; }
#rotate{transform: rotate(5deg); background:#666; width:100%; height: 100%; position:absolute; z-index:1}
.page{
    position:relative;
    border:0;
    padding:0;
    width:100%;
    z-index:2;
    float: left;
    height: 100%;
}

从body中删除了z-index，添加了z-index：1; #rotate，更改.page z-index：2

https://jsfiddle.net/ogvopvxs/

Answer 4

只需将#page的z-index更改为0，将#rotate更改为-1。

#rotate { z-index: -1; } 

#page { z-index: 0; }

CSS - Div z-index被忽略

4 个答案: