CSS網頁布局教程:絕對定位和相對定位

2024-07-11 08:24:20

字體：大中小

來源：轉載

供稿：網友

本文主要描述XHTML中相對定位和絕對定位各自的本質、用法、區別和兩者之間的關系。以及使用CSS的Left、Right、Top、Bottom屬性（偏移屬性）和Margin屬性（外邊距）對定位塊級元素進行布局的方法。
CSS網頁布局教程:絕對定位和相對定位。通過本文你絕對能理解絕對定位和相對定位了，如果你看完本篇文章還不理解絕對定位和相對定位的話，我看你就別學CSS了！哈哈！
概要：
本文主要描述XHTML中相對定位和絕對定位各自的本質、用法、區別和兩者之間的關系。以及使用CSS的Left、Right、Top、Bottom屬性（偏移屬性）和Margin屬性（外邊距）對定位塊級元素進行布局的方法。(本文的示例，請看這個附件demo。)
說明：
占位空間：元素在文檔流中所占據的空間。
物理空間：元素本身所占據的空間。
下面分3種情況分別對相對定位和絕對定位進行討論：
1.只使用css第一組屬性布局定位元素的情況
2.只使用css第二組屬性布局定位元素的情況
3.混合使用第一組和第二組屬性的情況
圖1為未定位時的初始效果，
層級關系為：
<div
<div box1
<div box2
<div box3
效果圖：
CSS網頁布局教程:絕對定位和相對定位_錯新站長站

圖1
一、用相對定位布局塊級元素
元素設置position值： position:relative
此屬性值的設置，元素沒有脫離文檔流，還是普通流定位模型的一部分，會對文檔流中其它元素布局產生影響。（說明：藍色代表占位空間，紅色代表元素）
看到本信息，說明該文章來源于錯新站長站www.survivalescaperooms.com，如果文章不完整請到錯新站長站Vevb.com瀏覽！
1.僅使用left、right、top和bottom屬性布局相對定位元素的情況
元素原本所占的占位空間仍保留，物理空間偏移。
看到本信息說明該文是通過網頁教學（Vevb.com）整理發布的，請不要刪掉！
圖2中，設置元素的left和top的值，對box2進行布局，可以發現除了box2偏移之外，其他塊級元素的位置沒有被影響，可見box2的占位空間還是存在的。
層級關系為：
<div
<div box1
<div box2 ——– position:relative ; top:-60px; left:80px;
<div box3
效果圖：
CSS網頁布局教程:絕對定位和相對定位_錯新站長站