总结
position: static (默认值)、relative 时
子元素的width、height 百分比相对于父元素的width、height
子元素的margin、padding 四个方向值百分比相对于父元素的width
子元素 position: relative
子元素的 top、bottom 百分比相对于父元素的height
子元素的 left、right 百分比相对于父元素的width
子元素 position: absolute
子元素的width、height 百分比相对于父级最近的不是 static 定位的元素的width、height
子元素的margin、padding 四个方向值百分比相对于父级最近的不是 static 定位的元素的width
子元素的 top、bottom 百分比相对于父级最近的不是 static 定位的元素的height
子元素的 left、right 百分比相对于父级最近的不是 static 定位的元素的width
子元素 position: fixed
子元素的width、height 百分比相对于浏览器窗口的width、height
子元素的margin、padding 百分比相对于浏览器窗口的width
子元素的 top、bottom 百分比相对于浏览器窗口的height
子元素的 left、right 百分比相对于浏览器窗口的width
子元素的width、height 百分比相对于谁？
子元素 position: static (默认值)
子元素的width、height 百分比相对于第一个父元素的width、height
子元素 position: relative
子元素的width、height 百分比相对于第一个父元素的width、height （和position: static一致）
第一个父元素是 positon: static
第一个父元素是 positon: absolute
提示：样式 .son 元素中的百分比下面会讲
子元素 position: absolute
子元素的width、height 百分比相对于父级最近的不是 static 定位元素的width、height
1
子元素 position: fixed
子元素的width、height 百分比相对于浏览器窗口的width、height
子元素的 margin、padding 百分比相对于谁？
子元素 position: static (默认值)
子元素的margin、padding 百分比相对于父元素的width
padding 的四个方向示例
margin 的四个方向示例
11111111111111111111111111111111111111111111
子元素 position: relative
子元素的margin、padding 百分比相对于父元素的width
子元素 position: absolute
子元素的margin、padding 百分比相对于父级最近的不是 static 定位的元素的width
子元素 position: fixed
子元素的margin、padding 百分比相对于浏览器窗口的width
子元素的 top、right、bottom、left 百分比相对于谁？
子元素 position: relative
子元素的 top、bottom 百分比相对于父元素的height
子元素的 left、right 百分比相对于父元素的width
子元素 position: absolute
子元素的 top、bottom 百分比相对于父级最近的不是 static 定位的元素的height
子元素的 left、right 百分比相对于父级最近的不是 static 定位的元素的width
子元素 position: fixed
子元素的 top、bottom 百分比相对于浏览器窗口的height
子元素的 left、right 百分比相对于浏览器窗口的width
子元素的 font-size 百分比相对于谁？
子元素 font-size 的百分比相对于html中父元素的 font-size。和当前元素或父元素是否定位无关
子元素的 line-height 百分比相对于谁？
子元素 line-height 的百分比相对于当前元素的 font-size
