DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 關於position的定位
關於position的定位
編輯:CSS特效代碼     

1.固定定位position:fixed;

相對於浏覽器窗口來進行定位,設置left,top,bottom,right

2.相對定位position:relative;

相對於元素本身定位,一般不設置left,top,bottom,right,主要是配合絕對定位實現元素的穩定排版。

如果加入了left,top,bottom,right的話相對於元素開始的占位移動,由於相對定位沒有脫離文檔流,於是保留元素開始的占位。

注:文檔流:html布局就是文檔流模型的,即塊級元素元素獨占一行<div><p>等等,行內元素不獨占一行<a><span>等等。整個html文件排版下來就是文檔流模型。

3.絕對定位position:absolute;

絕對定位相對於已經相對定位的最近的祖先元素,一般為了保證穩定直接給父子元素分別相對定位絕對定位,再加上left,top,bottom,right即可。

<div style="position: relative;">
     <p style="position: absolute; left: 10px;top: 0;"></p>
   <a href="###"></a>
</div>

絕對定位是脫離文檔流的,如上例中p元素不占位,如果有定位內容被覆蓋通過z-index:xx設置優先級。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved