工具/材料

Adobe Dreamweaver CS5

操作方法

• 01

  相對(duì)定位(relative)是非常容易掌握的概念，通俗一點(diǎn)就是正常的塊級(jí)定位，只不過(guò)塊級(jí)的位置是通過(guò)top、left、right、bottom屬性來(lái)進(jìn)行規(guī)定。不過(guò)，原來(lái)所占用的空間并沒(méi)有消失。首先先來(lái)正常的定位，如下圖。

  
• 02

  然后在正常定位的里面，利用position：relative來(lái)相對(duì)定位，relative屬性值的父元素就是上圖塊元素，如下圖。

  
• 03

  絕對(duì)定位(absolute)第一個(gè)特征就是會(huì)從文檔流中脫離，不占據(jù)任何空間。它的定位屬性也是跟相對(duì)定位一樣，通過(guò)top、left、right、bottom來(lái)進(jìn)行規(guī)定，如下圖。

  
• 04

  一個(gè)父元素里面包含多幾個(gè)絕對(duì)定位，如果絕對(duì)定位元素重疊在一起，如下圖，A和B重疊在一起了，需要A在前面B在后面，我們只需要在A里面添加z-index來(lái)控制。
  
  ，我們可以利用z-index來(lái)控制哪個(gè)在前，哪個(gè)在后，如下圖。

  
• 05

  但是一定要切忌，如若屬性值為absolute，那么一定要配合relative為父元素的塊來(lái)使用。如果沒(méi)有配合，如下圖。會(huì)直接以body為父元素。

  
• 06

  靜態(tài)定位(static)一般不使用，它的屬性值定義為沒(méi)有定位，元素出現(xiàn)在正常的流中。忽略top, bottom, left, right，如下圖。

  
• 07

  固定定位（fixed）屬性值的定義為瀏覽器窗口進(jìn)行定位。通俗一點(diǎn)就是父元素為body，通過(guò)top, bottom, left, right來(lái)控制位置。如下圖定位在relative里面，然而并沒(méi)有效果。

  

特別提示

注意：屬性值不同所產(chǎn)生的效果不同哦