一、position（檢索對象的定位方式）

成都創(chuàng)新互聯(lián)專注于市北企業(yè)網(wǎng)站建設,自適應網(wǎng)站建設,購物商城網(wǎng)站建設。市北網(wǎng)站建設公司,為市北等地區(qū)提供建站服務。全流程按需定制，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

 1.語法 position: static / relative /absolute /fixed /center /page /sticky

• static：對象遵循常規(guī)流。此時4個定位偏移屬性不會被應用。

• relative：對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規(guī)流中的任何元素。

• absolute：對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其margin不與其他任何margin折疊。

• fixed：與absolute一致，但偏移定位是以窗口為參考。當出現(xiàn)滾動條時，對象不會隨著滾動。

• center：與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）

• page：與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）

• sticky：對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體，當在屏幕中時按常規(guī)流排版，當卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果。（CSS3）

 2.說明

檢索對象的定位方式。

• 當position的值為非static時，其層疊級別通過z-index屬性定義。

• 絕對定位的元素，在top，right，bottom，left屬性未設置時，會緊隨在其前面的兄弟元素之后，但在位置上不影響常規(guī)流中的任何元素。

• 對應的腳本特性為position。

 3.舉例  

        

二、z-index（檢索或設置對象的層疊順序）

 1.語法 z-index:auto/integer

 2.取值  

• auto：元素在當前層疊上下文中的層疊級別是0。元素不會創(chuàng)建新的局部層疊上下文，除非它是根元素。

• integer：用整數(shù)值來定義堆疊級別?？梢詾樨撝怠?/p>

 3.說明

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

• z-index用于確定元素在當前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文。

• 每個元素層疊順序由所屬的層疊上下文和元素本身的層疊級別決定（每個元素僅屬于一個層疊上下文）。

• 同一個層疊上下文中，層疊級別大的顯示在上面，反之顯示在下面。

• 同一個層疊上下文中，層疊級別相同的兩個元素，依據(jù)它們在HTML文檔流中的順序，寫在后面的將會覆蓋前面的。

• 不同層疊上下文中，元素的顯示順序依據(jù)祖先的層疊級別來決定，與自身的層疊級別無關。

• 當z-index未定義或者值為auto時，在IE6,7下會創(chuàng)建新的局部層疊上下文，而在高級瀏覽器中，按照規(guī)范不產(chǎn)生新的局部層疊上下文，如下例：

  3.舉例

        

三、top

四、right

五、bottom

六、left

七、clip