這四個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教程篇了解學習這些樣式屬性。

總結

以上是生活随笔為你收集整理的DIV CSS left right top bottom定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。