margin为负值的理解如图所示：margin-left、margin-top是相对于自身元素移动的距离。如margin

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<style>
    #div1,#div2{
        background-color: #00A0E9;
        width: 100px;
        height:100px;
    }
    #div1{
        border:1px solid #fff;
    }
    #div2{
        background-color: green;
    }
    #div1{
        margin-top: -10px;
        margin-left: -10px;
        margin-bottom: -10px;
    }

</style>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>

如图所示：margin-left、margin-top是相对于自身元素移动的距离。如margin-top: -10px;margin-left: -10px;margin为负值时，会使元素自身向左、向上移动10px;

 margin-bottom: -10px;margin-right: -10px;会使该元素下面的元素和右面的元素向上或者向左移动10;