z-index与nth-child无法正常工作

Question

我在这里有三个可排序的列表,但我不希望他们的属性在他们的位置改变时改变.例如我可以防止他们的颜色改变但不能做同样的事情,z-index我在nth-child这里使用这个是我的代码http://codepen.io/anon/pen/pvEdMw

HTML

<ul>
<li>aaa</li>
<li>aaaasdsd</li>
<li>fgf</li>
</ul>

CSS

li{
position:relative;
background-color:orange;
}

li:nth-child(1){
box-shadow:2px 2px 2px black;
z-index:3;
color:red;
}

li:nth-child(2){
box-shadow:2px 2px 2px black;
z-index:2;
color:blue;
} 

li:nth-child(3){
box-shadow:2px 2px 2px black;
z-index:1;
color:green;
}

JQuery的

$('ul').sortable();

Answer 1

sortablejquery-ui的功能也可以使用z-index.它直接修改style元素,并设置z-index覆盖您的样式.

你如何的一种方法解决 这个问题是使用!important 的z-index.

li:nth-child(1){
  box-shadow:2px 2px 2px black;
  z-index:3 !important;
  color:red;
}

但我真的不喜欢使用!important它,因为它可能会破坏你的其他规则,并会使你的css代码更难维护.

另一种方法是挂接到stop回调和清理z-index组由sortable插件.

$('ul').sortable({
  stop: function( event, ui ) {
    $(this).find('li').css('z-index','');
  }
});