一、position：fixed

鎖定位置（相對于瀏覽器的位置），例如有些網站的右下角的彈出窗口。

二、position：absolute

絕對位置：

1.外層沒有position：absolute（或relative）；那么p相對于瀏覽器定位，如下圖中b（距離瀏覽器右邊框為50像素，距離下邊框為20像素）。

2.外層有position：absolute（或relative）；那么p相對于外層邊框定位，如下圖中bb（距離d的右邊框50像素，距離d的下邊框為20像素）。

三、position：relative

相對位置：

如下圖，相對于把此p包含住的p的某個位置進行固定。如果外層沒有包含他的，那就相對于瀏覽器進行相對位置的固定。

四、分層（z-index）

在z軸方向分層，可以理解為分成一摞紙，層數越高越靠上。

在上面relative的示例中，我們看到了aa遮住了a，這是因為后寫代碼的顯示級別越靠前，那么在不改變代碼順序的情況下如何讓a蓋住aa。如下：

五、float：left、right

Left、right時不用給他規定位置（left、top），直接相對于瀏覽器。若外部被包裹，相對于外部p的除去一行的位置的左上或右上顯示。

附加：1、

overflow：hidden； //超出部分隱藏；scroll，顯示出滾動條； /p //截斷流

2、cursor：pointer 鼠標指到上面時的形狀；

3、半透明效果：

 p >
 !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=utf-8 /  title 無標題文檔 /title  style type= text/css  border:5px solid blue;  width:1000px;  height:100px;  margin:10px;  left:150px;  top:80px;  position:absolute;}  border:5px solid blue;  width:240px;  height:200px;  margin:10px;  left:150px;  top:200px;  position:absolute;}  border:5px solid blue;  width:740px;  height:300px;  margin:10px;  left:410px;  top:200px;  position:absolute;}  border:5px solid blue;  width:740px;  height:200px;  margin:10px;  left:410px;  top:520px;  position:absolute;}  border:5px solid blue;  width:240px;  height:1500px;  margin:10px;  left:150px;  top:420px;  position:absolute;}  border:5px solid blue;  width:240px;  height:150px;  margin:10px;  left:150px;  top:1940px;  position:absolute;}  border:5px solid blue;  width:740px;  height:1350px;  margin:10px;  left:410px;  top:740px;  position:absolute;}  border:5px solid blue;  width:1000px;  height:200px;  margin:10px;  left:150px;  top:2110px;  position:absolute;}  border:5px solid blue;  width:1000px;  height:200px;  margin:10px;  left:150px;  top:2330px;  position:absolute;}  /style  /head  body bgcolor= #F0F0F0  p >
相信看了這些案例你已經掌握了方法，更多精彩請關注php 其它相關文章！
相關閱讀：
HTML Form表單元素的詳解
HTML文本格式化的實例詳解
html的特殊字符-css3 content: 特殊符號 應該如何使用
以上就是HTML的基礎知識.關于css樣式表和樣式屬性的詳細介紹的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。