CSS教程:position屬性

2024-07-11 08:24:22

字體：大中小

來源：轉載

供稿：網友

position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由于static為默認的方式。
position屬性可以讓你讓你隨意控制一個特定元素在瀏覽器何處以及如何顯示。比方說我們用position:fixed 讓一個圖片顯示在瀏覽器的左上角.即使出現滾動條他依然可以在瀏覽器的左上角.posotion屬性有4個取值.由于static為默認的方式。所以實際上可用的值只有3個為了方便閱讀~
以下統稱為：固定(fixed)、相對(relative)、絕對(absolute).
第1：固定定位(fixed)
固定定位可以讓某一元素固定在屏幕的某個位置.其效果和背景的background-attachment:fixed屬性相似！但是IE6以及更早的版本不支持.所以以下例子請在非IE6以下瀏覽器下瀏覽
例子：
運行代碼框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author" content="aslen" /><meta name="Copyright" content="www.gongchang.com" /><style>*{margin:0;padding:0}</style></head><body><div style="position:fixed;height:50px;width:50px;background:#f00;left:50px;top:50px;"></div><br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行<br />換行</body></html>

[Ctrl A 全部選擇提示：你可先修改部分代碼，再按運行]

上一篇：CSS改變選擇網頁文字背景色

下一篇：一列固定寬度布局和背景圖片絕對定位