學習HTML5和CSS(八)之定位

2021-09-27 08:20:31 字數 1532 閱讀 9313

2.靜態定位(static)

3.相對定位(relative)

4.絕對定位(absolute)

5.固定定位fixed

6.疊放次序(z-index)

7.四種定位總結

**元素的定位屬性主要包括定位模式和邊偏移兩部分。

邊偏移邊偏移屬性

描述top

頂端偏移量,定義元素相對於其父元素上邊線的距離

bottom

底部偏移量,定義元素相對於其父元素下邊線的距離

left

左側偏移量,定義元素相對於其父元素左邊線的距離

right

右側偏移量,定義元素相對於其父元素右邊線的距離

定位模式

在css中,position屬性用於定義元素的定位模式,其基本語法格式如下:

選擇器position屬性的常用值值描述

static

自動定位(預設定位方式)

relative

相對定位,相對於其原文件流的位置進行定位

absolute

絕對定位,相對於其上乙個已經定位的父元素進行定位

fixed

固定定位,相對於瀏覽器視窗進行定位

**靜態定位是所有元素的預設定位方式,當position屬性的取值為static時,可以將元素定位於靜態位置。 所謂靜態位置就是各個元素在html文件流中預設的位置。

**相對定位是將元素相對於它在標準流中的位置進行定位,當position屬性的取值為relative時,可以將元素定位於相對位置。

對元素設定相對定位後,可以通過邊偏移屬性改變元素的位置,但是它在文件流中的位置仍然保留。

當position屬性的取值為absolute時,可以將元素的定位模式設定為絕對定位。

注意: 絕對定位最重要的一點是,它可以通過邊偏移移動位置,但是它完全脫標,完全不佔位置。

**固定定位是絕對定位的一種特殊形式,它以瀏覽器視窗作為參照物來定義網頁元素。當position屬性的取值為fixed時,即可將元素的定位模式設定為固定定位。

當對元素設定固定定位後,它將脫離標準文件流的控制,始終依據瀏覽器視窗來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器視窗的大小如何變化,該元素都會始終顯示在瀏覽器視窗的固定位置。

z-index的預設屬性值是0,取值越大,定位元素在層疊元素中越居上。

如果取值相同,則根據書寫順序,後來居上。

後面數字一定不能加單位。

只有相對定位,絕對定位,固定定位有此屬性,其餘標準流,浮動,靜態定位都無此屬性,亦不可指定此屬性。

定位模式

是否脫標占有位置

是否可以使用邊偏移

移動位置基準

靜態static

不脫標,正常模式

不可以正常模式

相對定位relative

不脫標,占有位置

可以相對自身位置移動

絕對定位absolute

完全脫標,不占有位置

可以相對於定位父級移動位置

固定定位fixed

完全脫標,不占有位置

可以相對於瀏覽器移動位置

學習HTML5和CSS(三)

css cascading style sheets css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整...

HTML5學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...

HTML5前端開發入門之CSS定位流

1.定位流分類 1.1相對定位 1.2絕對定位 1.3固定定位 1.4靜態定位 預設情況下元素就是靜態定位 2.什麼是相對定位?相對於自己在原來標準流中的位置進行移動 格式 position relative top 20px left 20px 3.相對定位注意點 3.1相對定位是不脫離標準流的,...