原文链接：
负边距详解
在static元素中使用负边距
static元素：没有使用过float的元素
image
- 在top/left使用负边距时，它把元素向这个特定的方向拉
/* Moves the element 10px upwards */
<div style="width: 100px;height: 100px;margin-top: -10px;overflow: hidden;">
<p>item11112222222</p>
<p>item33333444444</p>
<p>item55555666666</p>
</div>
前后对比：
移动前
移动后
- 在bottom/right使用负边距时，将后面/右侧的元素往里拉覆盖自己
/*
将第一个div后面的元素全部向上拉50px，覆盖掉前一个div
*/
<div style="width: 100px;height: 100px;overflow: hidden;margin-bottom: -50px;">
<p>item11112222222</p>
<p>item33333444444</p>
<p>item555556666666</p>
</div>
<div style="width: 100px;height: 100px;overflow: hidden;">
<p>item11112222222</p>
<p>item33333444444</p>
<p>item555556666666</p>
</div>
前后对比：
移动前
移动后
- 未设置宽度时，左右负边距会把元素往两个个方向拉来增加宽度，此时margin的作用相当于padding
在浮动元素中使用负边距
- 对一个浮动元素使用负边距，会产生空白，其他元素可以覆盖这个空白，用于用户流式布局，eg：右侧固定宽度，左侧自适应宽度。
index.html:
<div class="left">
<div class="left-element">item1</div>
</div>
<div class="right">item2</div>
css:
.left {
width: 100%;
float: left;
}
.left-element {
height: 100px;
background-color: red;
margin-right: 100px;
}
.right {
width: 100px;
height: 100px;
float: right;
margin-left: -100px;
background-color: blue;
}
- 如果两个元素都使用了左浮动并且设置margin-right:-20px。#mydiv2会把#mydiv1看成宽度缩小20px（所以会覆盖一部分），但是#mydiv1并不会有任何变化，而是依然保持原先的宽度。
<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
- 如果负边距和宽度一样大的话，它就会被完全覆盖掉。
解决bug
-
文本和链接问题
在float中使用负边距可能会在旧的浏览器造成一些问题，比如：- 链接不可点击
- 文本变得很难选择
- 失去焦点的时候按tab键失效
解决方法：添加position:relative。
图片被剪切
使用IE6时，当遇到覆盖和浮动的时候内容有些时候会突然被剪切掉。
解决方法：同样的只要给浮动元素加上position:relative。
