主要寫關於層定位的相關知識瀏覽器
㈠定位概述spa
⑴像圖像軟件中的圖層同樣能夠對每個layer可以精肯定位操做blog
⑵層定位的position屬性決定了當前的一個網頁元素，能夠疊加到另外一個網頁元素上面，那麼咱們把這個網頁元素稱爲一層，那麼外面的元素稱爲父層，裏面嵌入的元素稱爲子層圖片
⑶position屬性 （相對於誰定位）文檔
fixed 固定定位 relative 相對定位 absolute 絕對定位it
⑷經過如下屬性定位 （位置在哪裏）io
①經過position屬性設定它的參照物是最外層盒子，經過top屬性設置當前盒子距離它的參照物上邊界的距離，經過left，right，bottom屬性設置當前盒子距離它的參照物左，右，下邊界的距離。class
②採用z-index屬性進行設定軟件
對於它的參照物來講，若是當前的這一層的z-index值比較小，好比說下層這一層z-index取值是1，上面這一層z-index取值是2，效果就是取值大的這一層會覆蓋遮擋取值小的這一層。im
㈡position屬性
⑴static：默認值
沒有定位，元素出如今正常的流中（靜態的，當前元素是文檔流定位的方式），top，bottom，left，right，z-index無效
⑵fixed：固定定位
相對於瀏覽器窗口進行定位，top，bottom，left，right，z-index有效。
⑶relative：相對定位
相對於其直接父元素進行定位，top，bottom，left，right，z-index有效。
⑷absolute：絕對定位
相對於static定位之外的第一個父元素進行定位，top，bottom，left，right，z-index有效。
★什麼叫直接父元素？
好比說，當前這一層它的父元素所在的位置，若是還有父元素的話，可是當前這一層是相對於它的緊鄰的父元素來定位，這個就叫作直接父元素。
㈢固定定位 position：fix
⑴當前有一個盒子，它是固定定位的方式，它的參照物是瀏覽器自己。
特色：不會隨瀏覽器窗口的滾動條滾動而變化，總在視線裏的元素。
⑵無論參照物是誰，它的座標原點始終在參照物的左上角，以下圖，（0.0）是座標原點，向右爲水平的x軸，向下爲垂直的y軸，向右方向值取正值，向左方向取值爲負值。
舉例：
㈣相對定位 position：relative
★relative：定位爲relative的元素脫離正常的文檔流中，但其在文檔流中的原位置依然存在。
舉例說明：
下圖就是相對定位，在屬性設定的時候，將寬和高設定出來，設置它的定位方式是相對定位，它的位置是相對於它的父元素top和left屬性設置的，分別爲20px。
下面看設定爲相對定位以後的變化：
⑴初始狀態下，它仍是文檔流定位：
⑵設置完相對定位，它會脫離文檔流位置，由top和left來決定，向右下方傾斜，可是因爲它的原來在文檔流當中的位置依然是被保留的，因此位於它下面的另一個static類型的元素沒有去佔據它的位置。
㈤絕對定位： position：absolute
absolute：定位爲absolute的脫離正常的文本流，但與relative的區別是其在正常流中的原位置再也不存在。
舉個案例：下面是它的代碼部分
下面看它出現的變化：
⑴如今是它初始狀態下，文檔流定位方式
⑵如今是它脫離文檔流，它的位置上和左分別是20px，這時候因爲它原來的位置會被丟失，因此它下面的這一靜態的定位，也就是默認的文檔流定位的元素會向上移動，佔據原有這個元素它的位置，這個就是排列以後的效果：
以上爲相對定位和絕對定位之間第一個區別。
如今說它們之間的第二個區別：
⒈relative定位的層老是相對於其直接父元素而言的，不管其父元素是什麼定位方式。
⒉absolute定位的層老是相對於其最近的定義爲absolute或relative的父層，而這個父層並不必定是其直接父層。對於absolute定位的層，若是其父層中都未定義absolute或relative，則其將將對body進行定位。
用表格的方式總結這二者之間的區別
㈥relative+absolute
⑴父元素box1：position：relative；
⑵子元素box2：position：absolute；
⑶子元素box2：top，bottom，left，right相對於父元素來進行偏移定位。
咱們一般會將外層的父元素box1設置爲相對定位，而後將它的內層子元素box2設置成絕對定位。
優勢：當父元素box1移動時，當它移動到另外一個位置，子元素是相對於父元素的位置進行定位的，因此它們兩個能夠一塊兒被移動。
具體應用：
⑴當前有這樣一幅圖片，要在這個圖片上面顯示一層文字，要作到使這個文字也須要跟着移動。
⑵作法：採用層定位relative+absolute，讓後面的這個盒子作父元素，裏面添加圖片，而後父元素裏面還包含一個子元素，就是文字，而後讓子元素疊加到圖片上面，這樣作就能夠了，具體的代碼和圖片示例以下圖所示：
以上就是CSS定位機制——層定位的相關知識，但願有所幫助。