DIV CSS left right top bottom定位

這四個CSS屬性樣式用于定位對象盒子，必須定義position屬性值為absolute或者relative此取值方可生效。

一、文法結構   -   TOP

Left、right、top、bottom後跟數字+html機關。

示範結構

div{left:20px}

div{right:20px}

div{top:20px}

div{bottom:20px}

Left 靠左距離多少

Right 靠右邊距離多少

Top 距離頂部距離多少

Bottom距離下邊距離多少

二、使用條件   -   TOP

通常單獨使用left、right、top、bottom均無效，需要在使用絕對定位CSS position樣式才能生效。

一般left和right在一個樣式是隻能使用其一，不能left和right都設定，要麼使用left就不使用right，要麼使用right就不使用left，如果left和right均使用将會出現相容問題，一個對象設定了靠左left多少距離，自然右邊距離自然就有了是以無需設定左邊。

相同道理，top和bottom對一個對象隻能使用其一，不然會出現邏輯相容問題。譬如一個人讓你往左走，一個人讓你往右走，同時發出往左往右走這個時候你也不好判斷往那邊走。

三、絕對定位中使用   -   TOP

一般left、right、top、bottom使用于配合position定位對象位置。大家可以進入CSS position教程篇了解學習這些樣式屬性。