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

接下來(lái)給大家介紹一下移動(dòng)div的常用方法

1.transform：translateY（）

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

因?yàn)樵匾苿?dòng)前的空間并沒(méi)有被占據(jù)，所以如果后續(xù)元素沒(méi)有脫離文檔流或者沒(méi)有移動(dòng)相同的距離，那么會(huì)顯露出背景的大片空白。

2.position：relative

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

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

3.margin外邊距

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

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

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