CSS中静态定位、相对定位、绝对定位、固定定位的特点

作者: Darren 分类: html与css 发布时间: 2019-05-16 18:22

静态定位的特点:

  1. 标准流中的元素默认的定位都是静态定位

  2. 偏移量对静态定位的元素无效

 

相对定位特点:

  1. 如果只设置定位方式不设置偏移量,元素位置不变

  2. 元素不脱标,占位置

  3. 相对于自身原来的位置 ,自身左上角为基点做定位

  4. 设置了相对定位以后,float不失效, margin-left:auto; 跟 margin-right:auto;也不失效

 

绝对定位特点:

  1. 如果只设置定位方式,不设置偏移量,元素位置不变

  2. 脱标,不占位置

  3. 改变元素的显示方式(类似浮动以后的元素显示方式)

  4. 如果有包含关系,子元素绝对定位,如果父辈元素都是是静态定位,那么这个子元素以浏览器为参考,做位置的移动;

如果父辈元素是非静态定位,那么这个子元素参考这个非静态定位的父辈元素做位置的移动如果父辈元素中有多个非静态定位的元素,那么这个子元素以离自己最近的非静态定位的父辈元素为参考,做位置的移动

  1. 设置了绝对定位以后,float失效, margin-left:auto; 跟 margin-right:auto;也失效

固定定位的特点:

  1. 固定定位的元素,不管父辈元素的定位方式,固定定位的元素始终都是以浏览器为参考,做位置的移动

  2. 脱标,不占位置

  3. 改变元素的显示方式,类似行内块的显示方式

  4. 固定定位的元素一定要设置宽和高 除非有内容可以撑开不用设置