例如，如果你想要將頁面整體向左移動10像素，你可以使用以下CSS代碼css body marginleft 10px 負值表示向左移動 * 或者，你也可以使用`transform`屬性來實現(xiàn)相同的效果css body transform translateX 負值表示向左移動 * 這兩種方法都可以達到將頁面整體向左移動的目的使。

1新建html文件2創(chuàng)建兩個div，并賦予id3為兩個div設置寬高和背景，并設置左右浮動4預覽效果如圖5創(chuàng)建第三個div6為第三個div設置寬高和背景7預覽效果如圖注意事項隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能但是隨著這些功能的增加，HTML變的越。

使用relative定位時，元素將保持在它原本的位置，然后通過leftrighttopbottom屬性進行偏移例如，要讓一個id為mybox的元素向左偏移20像素向上偏移20像素，可以這樣設置CSS代碼#myboxpositionrelativeleft20pxtop20px 這樣，mybox元素就會相對于其原始位置移動，但仍然占據(jù)原來的空間。

使用 float 屬性可以將元素向左或向右移動，從而使其他元素圍繞它排列通常，float 主要用于圖像布局，使文本能夠環(huán)繞圖像顯示例如，一個寬度為200px高度為200px的 div 元素，通過設置 float 屬性為 left，可以使多個這樣的 div 元素在同一行并排顯示，效果如同下面的代碼所示css div width。

如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”CSS。

我們需要先了解下positionrelative屬性，它是指leftrighttopbottom等中的偏移位置我們可以讓ul為positionrelativeleft50%，再讓li向左浮動，再讓positionrelativeright50%或者left50%，那么li就會向中間浮動一樣居中了不相信的可把下面的CSS定義結合上邊的代碼拷貝到HTML測試view。

首先，relative屬性使元素相對于其原始位置偏移如在代碼示例中，如果給#sub1設置position relative，它會根據(jù)top， left等屬性相對于自身位置進行偏移，而不影響#sub2的位置sub1的偏移基于其margin的左上側(cè)absolute屬性則有所不同，元素會脫離文檔流，根據(jù)最近的具有position屬性的祖先元素可能是。

left50% marginleft512px zindex1這三個定義在foot中，目的是使foot在瀏覽器中水平居中顯示原理對齊瀏覽器的中心點與foot的中心點，這樣就使得foot在瀏覽器中水平居中了left50% 使foot距離瀏覽器左邊50%，即一半marginleft512px 使foot向左移動512像素。

你是想把div緊貼中間區(qū)域吧，然后你再你的22寸顯示器上設置了一個固定的right，而fixed是距離瀏覽器邊緣的，你要是把你的22寸的瀏覽器改下窗口大小，一樣會出問題，你需要做的是用js計算出距離瀏覽器邊緣的距離，然后用js設置left或者right值，當瀏覽器觸發(fā)resize方法的時候重新計算。

我話少，直接上代碼，html代碼比較亂，主要為了產(chǎn)生垂直滾動條，看js就Ok了，jqueryjs自行下載，就不提供了，soeasy！其實說白了就是控制這個p的垂直滾動條的偏移，這里回到頂部，所以就設置成0順帶著也把頁面的垂直滾動條也移到了最頂端CSS+DIV做滑動門菜單，和TAB式選項卡菜單，要詳細步驟你。

absolute則是偏移其有relative屬性或者fixed屬性的父元素XX距離，沒有則相對于窗口偏移例子1 這樣圖片就可以相對于，父元素div左偏移20px ，頂部偏移20px如果div沒有relative屬性，則相對窗口body偏移20px。

在CSS中，“position relative”是設置定位類型為相對定位，它可以配合“top”“bottom”“l(fā)eft”“right”這4個偏移量來實現(xiàn)相對它所屬父元素的相對定位position屬性規(guī)定元素的定位類型，這個屬性定義建立元素布局所用的定位機制任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論。

top距離頂部的距離left距離左側(cè)的距離css的left和top屬性指的是距最近的一個position屬性為relative或者absolute的父級元素的左邊或上邊的距離，所以當要設置css的top和left的屬性時，一定要確保定義position為absolute或者relative如果父級屬性未設置position則默認為bodyleft和top的使用必須伴隨。

marginleft 10px`，元素可以向左偏移這種技巧在實現(xiàn)特殊布局時非常實用總之，理解并靈活運用margin和padding，能夠讓你的網(wǎng)頁設計更加精細，增強頁面的視覺效果和用戶體驗無論是控制元素間的間距，還是調(diào)整內(nèi)容與邊框的關系，都是提升頁面布局美觀度的關鍵步驟通過CSS，你可以輕松實現(xiàn)這些目標。

對于尺子的寬度，需要考慮兩側(cè)的偏移，因此為屏幕寬度加上尺子的總寬度數(shù)字標簽部分的計算更復雜，需要確保顯示時的精度若希望顯示中刻度的數(shù)字，將代碼中的10改為5，即可動態(tài)調(diào)整尺子的長度和顯示范圍為了實現(xiàn)尺子組件的交互體驗和性能優(yōu)化，需要考慮滑動時的慣性和越界后的橡皮筋特效通過CSS的過渡。

right 屬性規(guī)定元素的右邊緣該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移注釋如果 quotpositionquot 屬性的值為 quotstaticquot，那么設置 quotrightquot 屬性不會產(chǎn)生任何效果內(nèi)容來至w3c的css參考手冊元素的position屬性默認值是static，可以修改position為absolute。