相对定位

元素在移动位置的时候,相对于它原来的位置,语法:position:relative; 相对定位特点: 相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置) 原来在标准流的位置继续占有,后面的盒子仍以标准流的方式(不脱标,继续保留原来的位置)

绝对定位

元素在移动位置的时候,相对于它的祖先元素来说的,语法position:absolute; 绝对定位特点
  1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为基准定位
  2. 如果祖先元素有定位(相对、绝对、固定),则以最近一级的有定位的祖先元素为参考点移动位置
  3. 绝对定位不再占有原先的位置(脱标)
定位最常用的方式:子级是绝对定位,父级用相对定位。 解释:
  1. 子级使用绝对定位,不占有位置,可以放到父盒子里卖弄的任何一个地方,不会影响其它的兄弟盒子
  2. 父盒子需要使用定位限制子盒子在父盒子内显示

固定定位

元素固定于浏览器可视区的位置,可以在浏览器页面滚动的时候元素的位置不会发生改变,语法:position:fixed; 固定定位特点
  1. 以浏览器的可视窗口为参照点移动
  2. 跟父元素没有任何关系
  3. 不随滚动条滚动
  4. 固定定位不再占有原先的位置(脱标)

发表评论

后才能评论