前端~定位属性position(relative、absolute、fixed)的分析
1,简单了解:
relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute),作为定位的基准点(参照物)
absolute: 随参照物的变化而变化
fixed:固定
2,position 是否会被内部的子元素继承?
会,一般不能继承的属性,像盒模型,border、margin、padding等
注意事项:当使用了滚动组件(例如better-scroll)时,跟better-scroll 同层的组件可能需要设置一下positon属性,
因为有可能better-scroll局部的滚动范围会影响到该组件。
3,父级元素(position 是 relative)加入滚动条,子元素(position是 fixed)或 (position 是 absolute)的差异:
fixed:固定 ,位置不变,即使有滚动条,依然不变位置。
absolute:是参考父级元素的位置,父元素位置改变,它相应的改变。
4,属性值relative 和 absolute 的区别:
(1)是否脱离文档流: relative 不会脱离, absolute 会脱离
(2)对象可否层叠(就是对象原来的位置是否还被占据):
□ relative它是以自己本身所在位置进行偏移的,relative的对象被移出了原来的位置后,
注意:他原来的位置还属于它的,别的元素不能替代它原来的位置.
□absolute以最近一层relative的父级元素对象作为定位基准点,进行移动位置,
当absolute对象移出了原来的位置,那么他原来的位置也就不存在了, 其他元素可以占领它的位置。
5,专业解释relative:
相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。
同样可以用z-index分层设计。