定位方式及CSS高級技巧

時間 2019-11-24

標籤定位方式 css 高級技巧欄目系統網絡简体版

原文原文鏈接

定位

Background-position 背景位置算法

浮動，在一個浮字上面，咱們的定位，在一個位上。CSS離不開定位，特別是後面的JS特效，每天和定位打交道。瀏覽器

爲何要使用定位？

元素的定位屬性

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

一、邊偏移3d

邊偏移屬性指針	描述orm
top對象	頂端偏移量，定義元素相對於其父元素上邊線的距離blog
bottom圖片	底部偏移量，定義元素相對於其父元素下邊線的距離ip
left	左側偏移量，定義元素相對於其父元素左邊線的距離
right	右側偏移量，定義元素相對於其父元素右邊線的距離

二、定位模式

Position屬性用於定義元素的定位模式，其基本語法格式以下：

靜態定位（static）

靜態定位是全部元素的默認定位方式，當position屬性的取值是static時，能夠將元素定位於靜態位置。所謂靜態位置就是各個在HTML文檔流中默認的位置。

相對定位relative（自戀型）

相對定位是將元素相對於它在標準流中的位置進行定位，當position屬性的取值爲relative時，能夠將元素定位於相對位置。

對元素設置相對定位後，能夠經過邊偏移量改變元素的位置，可是它在文檔流中的位置仍然保留。

注意：

一、相對定位能夠經過偏移量移動位置，可是原來的所佔位置繼續保留（相似於停薪留職）。

二、每次移動的位置，是以本身的左上角爲基點移動。（相對於本身來移動位置）

就是說，相對定位的盒子仍在標準流中，它後面的盒子仍以標準流方式對待它。（相對定位不脫標）

若是說浮動的主要目的是讓多個塊級元素一行顯示，那麼定位的主要價值就是移動位置，讓盒子到咱們想要的位置上去。

絕對定位absolute（拼爹型）

注意：若是文檔可滾動，絕對定位元素會隨着它滾動，由於元素最終會相對於正常流的某一部分地位。

當position屬性的取值爲absolute時，能夠將元素的定位模式設置爲絕對定位。

注意：絕對定位最重要的一點是，它能夠經過偏移量移動位置，可是它徹底脫標，徹底不佔位置。

父級沒有定位

父級沒有定位，取上一級定位，body的定位就是瀏覽器當前屏幕爲準對齊。

父級有定位

子絕父相

子絕父相：子級是絕對定位的話，父級要用相對定位。

絕對定位是將元素依據最近的已經定位絕對、固定或相對定位的父元素（祖先）進行定位。

絕對定位的盒子水平/垂直居中

普通的盒子是左右margin改成auto就可，可是對於絕對定位就無效了

定位的盒子也能夠水平或者垂直居中，有一個算法：

一、首先left 50% 父盒子的一半大小

二、而後走本身外邊距負的一半值就能夠了 margin-left

固定定位fixed(認死理型)

固定地位是絕對定位的一種特殊形式。它以瀏覽器窗口做爲參照物來定義網頁元素。當position屬性的取值爲fixed時，便可將元素的定位模式設置爲固定定位。

當對元素設置固定定位後，它將脫離標準文檔流動的控制，始終依據瀏覽器窗口來定義本身的顯示位置。無論瀏覽器滾動條如何滾動，也無論瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有2點：

一、固定定位的元素跟父親沒有任何關係，只認瀏覽器

二、固定定位徹底脫標，不佔有位置，不隨着滾動條滾動。

疊放次序（z-index）

注意：z-index:100;

一、z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居中。

二、若是取值相同，則根據書寫順序，後來居上

三、後面數字必定不能加單位

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

四種定位總結

定位模式	是否脫標占有位置	是否能夠使用邊偏移	移動位置基準
靜態static	不脫標，正常模式	不能夠	正常模式
相對定位relative	不脫標，佔有位置	能夠	相對自身位置移動
絕對定位absolute	徹底脫標，不佔有位置	能夠	相對於定位父級移動位置
固定定位fixed	徹底脫標，不佔有位置	能夠	相對於瀏覽器移動位置