html5 css3學習(七)之定位

2021-10-21 02:25:48 字數 1004 閱讀 7742

開啟定位: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的標準模...