開啟定位:position的值為非static
通過position屬性來設定元素的定位
可選值
static:預設值,元素沒有開啟定位
relative:開啟元素的相對定位
absolute:開啟元素的絕對定位
fixed:開啟元素的固定定位
當元素開啟了定位,可以通過left、right、bottom、top四個屬性來設定元素的偏移量
left:元素相對於其定位位置的左側偏移量
right:元素相對於其定位位置的右側偏移量
top:元素相對於其定位位置的上側偏移量
bottom:元素相對於其定位位置的下側偏移量
1、相對定位
相對定位是相對於元素在文件流中的位置進行變化,相對定位的元素不會脫離文件流,相對定位會使元素提公升乙個層級,可以覆蓋文件流中元素
2、絕對定位
開啟絕對定位元素會脫離文件流,絕對定位是相對於離它最近的開啟了定位的祖先元素進行定位的,如果所有的祖先元素都沒有開啟定位,則會相對於瀏覽器視窗進行定位,絕對定位會使元素提公升乙個層級,絕對定位會改變元素的性質(因為脫離了文件流 ),內聯元素會變成塊元素,塊元素的寬度和高度預設都被內容撐開。
3、固定定位
固定定位也是一種絕對定位,不同的是:永遠相對於瀏覽器視窗定位,固定定位會固定在瀏覽器視窗的位置,不會隨滾動條一起滾動,ie6不支援固定定位。
如果定位元素層級一樣,那麼結構上(html文字中)後面的會蓋住前面的。
通過z-index
可以用來表示元素的層級,為其設定乙個正整數作為值,層級越高,越優先顯示
沒有開啟定位的元素不能開啟z-index
父元素的層級再高也不會蓋住子元素。
html5 css3學習(五)之浮動
通過display樣式可以修改元素的型別 可選值lnline 將乙個元素作為內聯元素顯示 block 將乙個元素設為塊元素顯示 inline block 將乙個元素轉換為行內塊元素,使元素既有行內元素特點又有塊元素特點,使其既能設定寬高,又不會獨佔一行 none 不顯示元素,並且元素不會在頁面中占有...
html5 css3學習(十)之表單
表單的作用就是使用者提交資訊給伺服器 使用form標籤建立表單,標籤中的action屬性,屬性指向的是伺服器的位址 提交表單時會提交到action屬性對應的位址。使用input建立提交表項,並且必須指定name屬性以便獲取提交的表項 一些特殊的情況,我們的 只在某些特殊瀏覽器中執行,而不需要在其他瀏...
菜鳥學習HTML5 CSS3(一)
主要內容 1.新的文件型別宣告 dtd 2.新增的html5標籤 3.刪除的html標籤 4.重新定義的html標籤 一 新的文件型別宣告 dtd html 5的dtd宣告為 等也是正確的,因為html語法是不區分大小寫的。在編寫html5文件時,要求指定文件型別,以確保瀏覽器能在html5的標準模...