主要寫關於層定位的相關知識
㈠定位概述
⑴像圖像軟件中的圖層一樣可以對每一個layer能夠精確定位操作
⑵層定位的position屬性決定了當前的一個網頁元素，可以疊加到另一個網頁元素上面，那么我們把這個網頁元素稱為一層，那么外面的元素稱為父層，里面嵌入的元素稱為子層
⑶position屬性 （相對於誰定位）
fixed 固定定位 relative 相對定位 absolute 絕對定位
⑷通過以下屬性定位 （位置在哪里）
①通過position屬性設定它的參照物是最外層盒子，通過top屬性設置當前盒子距離它的參照物上邊界的距離，通過left，right，bottom屬性設置當前盒子距離它的參照物左，右，下邊界的距離。
②采用z-index屬性進行設定
對於它的參照物來說，如果當前的這一層的z-index值比較小，比如說下層這一層z-index取值是1，上面這一層z-index取值是2，效果就是取值大的這一層會覆蓋遮擋取值小的這一層。
㈡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定位機制——層定位的相關知識，希望有所幫助。