常見布局技巧

1.margin負值妙用

點選檢視代碼

ul li {
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }
           

解析：

先看1盒子，執行margin-left，2盒子由于浮動也跟着1盒子移動，2盒子執行margin-left,12盒子邊框重合

position: relative;
            border: 1px solid blue;
           

這是針對盒子沒有定位的情況，

如果盒子有定位，則通過設定z-index，提高目前盒子的層級