一、position:fixed
鎖定位置(相對於瀏覽器的位置),例如有些**的右下角的彈出視窗。
二、position:absolute
1.外層沒有position:absolute(或relative);那麼div相對於瀏覽器定位,如下圖中b(距離瀏覽器右邊框為50畫素,距離下邊框為20畫素)。
2.外層有position:absolute(或relative);那麼div相對於外層邊框定位,如下圖中bb(距離d的右邊框50畫素,距離d的下邊框為20畫素)。
三、position:relative
相對位置。
如下圖,相對於把此div包含住的div的某個位置進行固定。如果外層沒有包含他的,那就相對於瀏覽器進行相對位置的固定。
四、分層(z-index)
在z軸方向分層,可以理解為分成一摞紙,層數越高越靠上。
在上面relative的示例中,我們看到了aa遮住了a,這是因為後寫**的顯示級別越靠前,那麼在不改變**順序的情況下如何讓a蓋住aa?如下:
五、float:left、right
left、right時不用給他規定位置(left、top),直接相對於瀏覽器。若外部被包裹,相對於外部div的除去一行的位置的左上或右上顯示。
overflow:hidden;//超出部分隱藏;scroll,顯示出滾動條;
//截斷流
附:cursor:pointer 滑鼠指到上面時的形狀
透明區域
在樣式表中的**為:
.box
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
HTML 格式與布局
一 position fixed 鎖定位置 相對於瀏覽器的位置 例如有些 的右下角的彈出視窗。二 position absolute 1.外層沒有position absolute 或relative 那麼div相對於瀏覽器定位,如下圖中b 距離瀏覽器右邊框為50畫素,距離下邊框為20畫素 2.外層...
HTML靜態網頁 格式與布局
一 position fixed 鎖定位置 相對於瀏覽器的位置 例如有些 的右下角的彈出視窗。示例 二 position absolute 相對於自己最近的父元素來定位的 1.外層沒有position absolute 或relative 那麼div相對於瀏覽器定位,如下圖中b 距離瀏覽器右邊框為5...
15 07 27 HTML 樣式 格式與布局
格式與布局 流式布局 float left right 向左流 向右流 clera both 截斷流 例如木頭放在水流上碰到牆,挨個停下,先流的先靠牆停下 元素並列 元素巢狀 定位布局 position fixed absolute relative top right bottom left 三種...