Question

我试图将兄弟元素（黄色）滑过另一个兄弟元素（红色），确保黄色永远不会滑过蓝色元素，只有红色，但我对z-index有很多问题。有没有办法在没有z-index的情况下实现这一目标？是否有可能在不同位置有多个黄色和红色元素，黄色元素总是在红色元素上滑动？

在此查看我的进度，目前黄色幻灯片位于蓝色元素上方： https://jsfiddle.net/0qf95eap/25/

JS：

$( document ).ready(function() {
  var slideToLeft = $('.yellow');

  slideToLeft.show();
  slideToLeft.css('z-index','5');
  slideToLeft.prev().css('z-index','1');
  slideToLeft.next().css('z-index','1');
  slideToLeft.nextUntil(".row").css('z-index','10');

  slideToLeft.animate({right: "25%"}, 2000);

  slideToLeft.prevUntil(".row").css('z-index','5');
  slideToLeft.animate({right: "50%"}, 2000);

});

HTML：

<ul>
  <li class="blue row"></li>
  <li class="blue"></li>
  <li class="red"></li>
  <li class="yellow"></li>
  <li class="blue"></li>
  <li class="blue row"></li>
  <li class="blue"></li>
  <li class="blue "></li>
  <li class="blue"></li>
  <li class="blue row"></li>
  <li class="blue"></li>
  <li class="blue"></li>
  <li class="blue"></li>
</ul>

CSS：

* {
  border: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  width: 100%;
  height: 100%;
}
li {
  display: inline-block;
  width: 25%;
  height: 200px;
  float: left;
  position: relative;
  border: 1px solid white;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.previous {
  position: relative;
  z-index: 3 !important;
}
.next {
  z-index: 9;
}

Answer 1

这很有效。

$( document ).ready(function() {
  var elements = $('.yellow');
  for(var i=0;i<elements.length;i++)
  {
    $(elements[i]).show().css('z-index','50').animate({left: "-100%"}, 2000);
  }
});

* {
  border: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  width: 100%;
  height: 100%;
}
li {
  display: inline-block;
  width: 25%;
  height: 200px;
  float: left;
  position: relative;
  border: 1px solid white;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
  z-index:100;
}
.yellow {
    background-color: yellow;
    position: absolute;
    display: none;
    height: 100%;
    width: 100%;
    left: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="blue row"></li>
  <li class="blue"></li>
  <li class="red"><div class="yellow">
  </div></li>
  <li class="blue"></li>
  <li class="blue"></li>
  <li class="red"><div class="yellow">
  </div></li>
  <li class="blue"></li>
  <li class="blue "></li>
  <li class="blue"></li>
  <li class="blue row"></li>
  <li class="red"><div class="yellow">
  </div></li>
  <li class="blue"></li>
  <li class="blue"></li>
</ul>

Answer 2

您可以在CSS中设置z-index，仅限蓝色元素。

蓝色需要在红色和黄色之上。可以设置z-index:1 + position:relative
黄色需要在红色之上。 position:absolute +成为下一个，它将自行完成（defaut z-index为0）。
红色不需要z-index，可以跳过position:relative;以避免将其置于最顶层。

$( document ).ready(function() {
  var slideToLeft = $('.yellow');
  slideToLeft.show();
  slideToLeft.animate({right: "25%"}, 2000);
  slideToLeft.animate({right: "50%"}, 2000);

});

* {
  border: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
ul {
  width: 100%;
  height: 100%;
  list-style:none;
}
li {
  width: 25%;
  height: 200px;
  float: left;
  border: 1px solid white;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
  position:relative;
  z-index:1;
}
.yellow {
  background-color: yellow;
  position: absolute;
  right: 0;
  top: 0;
}
.previous {
}
.next {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="blue row"></li>
  <li class="blue"></li>
  <li class="red"></li>
  <li class="yellow"></li>
  <li class="blue"></li>
  <li class="blue row"></li>
  <li class="blue"></li>
  <li class="blue "></li>
  <li class="blue"></li>
  <li class="blue row"></li>
  <li class="blue"></li>
  <li class="blue"></li>
  <li class="blue"></li>
</ul>

https://jsfiddle.net/0qf95eap/76/

滑动并揭示兄弟姐妹对另一个兄弟元素

2 个答案: