碎碎念：寫博客就是在整理自己的思路，有條有理地把自己的想法表達出來，而且做到了一次書寫，多次複用！多寫博客多思考。寫博客是一件從長遠來看有很多好處，卻幾乎沒有什麼壞處的事情，從現在開始堅持！
基本概念
這張圖很好地說明了margin的概念：當設置margin-top、margin-left爲負數時，元素自身會進行移動，但原先所佔的位置依然有效，設置margin-bottom/right爲負數，元素並不會向下/右移動，而是將後續的元素拖拉進來，覆蓋本來的元素。利用這個思想，我們可以做出很多的效果。
小例子：
注意right元素，在左浮動後，又margin-left了-200px（與自身寬度相同），直接導致元素在自身div所佔的那一行上消失，跑到上面去了。
效果一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin Negative</title>
</head>
<style type="text/css">
ul { list-style: none;}
.col{line-height: 1.5em;}
.col2{margin-left: 150px;}
.col3{margin-left: 300px;}
.top{margin-top: -3em;}
</style>
<body>
<div>
<ul>
<li class="col">阿里巴巴</li>
<li class="col">網易</li>
<!--先起作用的是margin-top，向上移動3個字符間距，然後攝者左邊距 -->
<li class="col2 top">蘑菇街</li>
<li class="col2">微店</li>
<li class="col2">大搜車</li>
<li class="col3 top">百度</li>
<li class="col3">騰訊</li>
<li class="col3">新美大</li>
</ul>
</div>
</body>
</html>
效果二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Negative Margin</title>
</head>
<style type="text/css">
.pic{
display: block;
margin:-480px 0 0;
}
</style>
<body>
<div class="item">
<a href="javascript:void(0)" class="">
<img src="img/moon.jpg">
</a>
<span alt="flag" class="pic"><img src="img/flower.jpg"></span>
</div>
</body>
</html>效果三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin Negative</title>
</head>
<style type="text/css">
.item {
border: 1px solid #cee;
padding: 10px;
height: 300px;
}
.demo-text {
margin: -229px 0 0 410px;
border: 1px solid #000;
}
</style>
<body>
<div class="item">
<div><img src="img/moon.jpg" width="400px" height="229px"></div>
<div class="demo-text">
<p>
如果我重新回到22歲，我認爲成功的人生是由在我們舒適區之外的很多次週期構成的。不管年齡與過往經歷，我們都有能力被啓發，被鼓舞，獲得能量，並重新開。22歲這個年齡擁有強大的抱負、自信與精力，但你心中可能只有一個模糊的目標——去做一些“很棒的事情”。“很棒的事情”從不容易，也總是存在於你的舒適區之外。真正的生活開始於你的舒適區之外。
</p>
</div>
</div>
</body>
</html>
參考資料
http://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html
http://www.hicss.net/i-know-you-do-not-know-the-negative-margin/