前端~定位属性position（relative、absolute、fixed）的分析

前端~定位属性position（relative、absolute、fixed）的分析

 

1，简单了解：

relative：移动自身时，参考自身的原来位置而移动，移动子元素（子元素设置了absolute），作为定位的基准点（参照物）

absolute: 随参照物的变化而变化

fixed：固定

 

2，position 是否会被内部的子元素继承？

会，一般不能继承的属性，像盒模型，border、margin、padding等

但是，当子元素（或者时子组件）需要调整位置时，一定要~重新设置一下position的属性值

 

 

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分层设计。