简单的html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
/*设置ul的样式*/
ul{width:300px;height:30px;
border:1px solid #000;
background:#f5f5f5;
margin: 50px auto;
overflow:hidden;
}
/*li向左浮动，宽80px，文字居中*/
li{list-style:none;
float:left;
width:80px;height:30px;
text-align:center;
}
/**/
.one{background:red;
}
.two{background:blue;
margin-left:-50px; /***margin-left:-50px***/
}
</style>
</head>
<body>
<ul>
<li class="one">one</li>
<li class="two">two</li>
</ul>
</body>
</html>
没加margin负值时，运行结果如下：
-
给“蓝色two”这个li，设置margin-left:-50px; 运行结果如下：
请问为什么在给“蓝色two”这个li，设置margin-left:-50px;后，蓝色two遮住了红色的one？而不是“红色one”盖住“蓝色two”呢？谢谢！
有趣，我觉得只能这么理解，对于设置margin值的元素，它可以在容器中获得比普通元素更高的index值，只要容器还有空间完整显示这个元素，超出元素就可能隐藏掉了。
但是这样理解也是不对的，因为这个元素的position是默认值static，也就是说index对于它来说是没有作用的。
设置一下z-index就好了
没有设置position定位z-index的情况下，如果标签位置有重叠，后面的标签会在前面标签的上面。
我觉得设置了float浮动脱离文档流的情况下，默认堆叠顺序是按照标签先后顺序来的，而你这个two正好在one的后面，如果再增加一个<li>，two设置margin-left:-50，同样也会被后面覆盖。如果想让one在堆叠上层，可以设置position:relative加z-index：99就行了。
z-index. 只能用于定位元素，上面的回答离题了。html书写先后的权重问题。你可以测试给你的第一个设置负margin，那样你会发现它仍然在后者之下。新手首答，勿喷
因为margin设置为负值是会产生部分层级重叠，层级的优先顺序是后来居上，蓝色的li在红色的后面，所以会遮住红色的li。同理，就算你给红色的li设置margin-right为负值也会产生上面一样的效果。
坐等大神解答
在没有设置定位（position）和层级（z-index）的情况下，元素的层级默认就是按照先后顺序来排的，后面的元素层级高于前面的元素，所以后面蓝色的li会挡住前面红色的li。
这个特性很重要，我们写模态框的时候，一般都是用追加（append）于body的形式插入，也是为了使得生成的模态框默认靠前显示，当然，为了保险起见，也可以设置层级（这些是后话）。
虽然CSS中有层叠，继承，优先级的概念，但是你列出的这个问题和这些并没有直接关系，所以你可以按照简单的方式去理解
那么页面中某些元素被其他元素覆盖的问题，我们会想到的是使用了
position:relative或position:absolute进行了定位，通过z-index值来改变元素的层级显示顺序，但是示例代码中也并没有使用定位，所以你还可以在简单一些理解。如果没有定义绝对定位
position的时候，页面元素发生了重叠，即margin-left:-50px;,那么元素是如何定义层级的优先顺序的呢？
如果兄弟元素都没有定位属性时，HTML结构会按照 后者元素 优先于 前者元素 的层级顺序进行显示。
现在，你把.two定义的margin-left:-50px; 改为.one定义为margin-right:-50px; 会发现是一样的效果，所以显示的层级顺序和设定的负margin并没有直接关系。
.one{
background:red;
margin-right:-50px;
}
.two{
background:blue;
/**margin-left:-50px**/
}