CSS層定位屬性簡介

CSS 定位 (Positioning) 屬性容許你對元素進行定位。

經過使用 position 屬性，咱們能夠選擇 4 種不一樣類型的定位，這會影響元素框生成的方式。css

position 屬性值的含義：html

static
沒有定位，元素出如今正常的流中top, bottom, left, right ， z-index無效
relative
相對於其直接父元素進行定位top,bottom,left,right，z-index有效
absolute
相對於 static 定位之外的第一個父元素進行定位top, bottom, left, right ， z-index 有效
fixed
相對於瀏覽器窗口進行定位top, bottom, left, right ， z-index 有效web

屬性	描述
position	把元素放置到一個靜態的、相對的、絕對的、或固定的位置中
top	top 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移
right	定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移
bottom	定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移
left	定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移
overflow	設置當元素的內容溢出其區域時發生的事情
clip	設置元素的形狀。元素被剪入這個形狀之中，而後顯示出來
vertical-align	設置元素的垂直對齊方式
z-index	設置元素的堆疊順序

–引用於http://www.w3school.com.cn/tiy/t.asp?f=csse_position_relative瀏覽器

固定定位position:fix

不會隨瀏覽器窗口的滾動條滾動而變化總在視線裏的元素svg

#a{
width:200px;
height:200px;
border:1px solid blue;
}
position:fixed;
left:100px;
top:100px;
}

相對定位position:relative

• List item定位爲relative的元素脫離正常的文檔流中，但其在文檔流中的原位置依然存在;就是說把這個盒子設置爲相對定位以後而且離開原來的位置，其餘盒子並不會來填充這個位置佈局

• List itemrelative定位的層老是相對於其直接父元素，不管其父元素是什麼定位方式code

絕對定位position:absolute

• List item定位爲absolute的層脫離正常文本流，但與relative的區別:其在正常流中的原位置再也不存在
• 對於absolute定位的層老是相對於其最近的定義爲absolute或relative的父層，而這個父層並不必定是其直接父層
• 對於absolute定位的層,若是其父層中都未定義absolute或relative，則其將相對body進行定位
  ~~ ~~
  通常來講，咱們會把父佈局設爲相對定位，子佈局設爲絕對定位，這樣無論父佈局怎麼變化，總體的佈局是不會變化的