html中position定位問題

position定位屬性，檢索對象的定位方式

1、語法：position：static（無特殊定位）/absolute（絕對定位）/relative（相對定位）/fixed（固定定位）

一、static：默認值，無特殊定位，對象遵循HTML原則；

二、absolute：絕對定位， 將對象從文檔流中拖出，使用left/right/top/bottom等屬性相對其最接近的一個並有定位設置的父元素進行絕對定位；若是不存在這樣的父對象，則依據body對象而其層疊經過z-index屬性定義；

三、relative：相對定位，將依據right，top，left，bottom（相對定位）等屬性在正常文檔流中偏移位置；

四、fixed：（固定定位），對象定位聽從絕對定位方式（absolute）；可是要遵照一些規範；

2、絕對定位和相對定位的區別

一、參照物不一樣，絕對定位的參照物是包含塊，相對定位的參照物是元素自己位置

二、絕對定位將對象從文本流中拖出，相對定位不破壞正常的文檔流順序

3、包含塊的概念及做用

包含塊是絕對定位的基礎，包含塊就是爲決定定位元素提供座標、偏移和顯示範圍的參照物，即肯定絕對定位的偏移起點和百分比長度的參考

默認狀態下，body是一個大的包含塊，全部絕對定位的元素都是根據窗口來定本身所處的位置和百分比大小顯示的，若是咱們定義了包含元素爲包含元素塊之後，對於被包含的絕對定位元素來講，就會根據最接近的具備定位功能的上級包含元素來定位本身的顯示位置。

定義元素爲包含塊：給絕對定位元素的父元素添加聲明position：relative；

 

*定位元素的層疊屬性：z-index：auto|number（數值，而且不加單位）

檢索或設置對象的層疊順序

auto:默認，堆疊順序與父元素相等

number：設置元素的堆疊順序

一、number：較大值的對象會覆蓋較小值的對象，如兩個絕對定位對象的number值同樣大時，那麼將依據他們在HTML文檔中聲明的順序層疊，此屬性僅僅做用於position的值爲relative或abslute或fixed的對象

二、這個屬性不會做用於窗口控件，如：select、iframe