前端~定位属性position(relative、absolute、fixed)的分析

2021年09月15日 阅读数:1
这篇文章主要向大家介绍前端~定位属性position(relative、absolute、fixed)的分析,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前端~定位属性position(relative、absolute、fixed)的分析前端

 

1,简单了解:spa

relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute),做为定位的基准点(参照物)设计

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

fixed:固定继承

 

2,position 是否会被内部的子元素继承?文档

通常不能继承的属性,像盒模型,border、margin、padding等it

可是,当子元素(或者时子组件)须要调整位置时,必定要~从新设置一下position的属性值io

 

 

3,父级元素(position 是 relative)加入滚动条,子元素(position是 fixed)或 (position 是 absolute)的差别:margin

fixed:固定 ,位置不变,即便有滚动条,依然不变位置。top

absolute:是参考父级元素的位置,父元素位置改变,它相应的改变。

 

4,属性值relative 和 absolute 的区别:

(1)是否脱离文档流: relative 不会脱离, absolute 会脱离

(2)对象能否层叠(就是对象原来的位置是否还被占据):

  □ relative它是以本身自己所在位置进行偏移的,relative的对象被移出了原来的位置后,

  注意:他原来的位置还属于它的,别的元素不能替代它原来的位置. 

  □absolute以最近一层relative的父级元素对象做为定位基准点,进行移动位置,

  当absolute对象移出了原来的位置,那么他原来的位置也就不存在了, 其余元素能够占领它的位置。

 

5,专业解释relative:

相对定位(relative):对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。

一样能够用z-index分层设计。