1. 程式人生 > >精通css——position屬性

精通css——position屬性

一:概念

1. static

  static是預設的流,沒有top,  bottom, left, right屬性和z-index屬性

2. relative

  相對於該元素原先的位置進行定位,可以指定top, bottom, left, right屬性和z-index屬性

  元素仍存在原文字流中,在文字流中佔據位置

  相對於最近的父元素定位

3. absolute

  相對於除static定位以外第一個父元素進行定位,可以指定top, bottom, left, right屬性和z-index屬性

  元素脫離文字流

  相對於最近的absolute或者relative元素定位

4. fixed

  相對於瀏覽器視窗進行定位,可以指定top, bottom, left, right屬性和z-index屬性

 

二:使用

1. 若想把一個定位屬性為absolute的元素定位於其父級元素內,只有滿足兩個條件

  1. 設定TRBL

  2. 父級元素設定Position屬性

2. 絕對定位超出可視區域範圍會出現滾動條,相對定位元素在可視區域之外,滾動條不會出現