設(shè)計出具了這樣的一個需求，一眼丁真-鑒定為移動div，首先寫成如下這種情況。

接下來給大家介紹一下移動div的常用方法

1.transform：translateY（）

作為css中唯一一個控制元素位置的元素，當(dāng)然首先介紹一下他。translate()方法，根據(jù)左(X軸)和頂部(Y軸)位置給定的參數(shù)，從當(dāng)前元素位置移動。在括號內(nèi)部輸入移動的像素值或者百分比就能把元素向選定方向移動，這樣的移動方法是保留元素在原位置的空間的，也就是說，底部會發(fā)生這種情況。

因?yàn)樵匾苿忧暗目臻g并沒有被占據(jù)，所以如果后續(xù)元素沒有脫離文檔流或者沒有移動相同的距離，那么會顯露出背景的大片空白。

2.position：relative

相對定位，我們直接使用相對定位，設(shè)置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。

這個情況和transform：translate（）一樣，原本的空間將被保留，底部的元素也將顯露出大量空白。

3.margin外邊距

外邊距也可以用來移動元素，準(zhǔn)確來說并不是移動，而是依靠外邊距把原本的元素給撐開，于是我們可以用逆向思維，當(dāng)我們設(shè)置外邊距為負(fù)時，元素的外邊距因?yàn)槭秦?fù)值就會發(fā)生坍縮，內(nèi)部的元素就會超坍縮的方向移動。

當(dāng)我們使用margin移動時，會發(fā)生這樣的情況，我們可以使用相對定位和z-index使其優(yōu)先級大于頭部背景，就可以正常顯示了。

相對于其他兩種情況，這個margin法的優(yōu)勢在于元素不占據(jù)原來的位置，其他元素能夠跟在該元素后正常顯示。