区分position:relative; position:absolute; position:fixed

对于position:relative; position:absolute; position:fixed,很多小伙伴分不清他们具体是针对哪里移动的,下面我给大家讲讲我个人理解。

position:absolute;(绝对定位)

position:rabsolute; 他的意思是绝对定位,他是参照父级的原始点为原始点,无父级则以body的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位.
①当定义position:absolute;的div没有父级的时候它的位移的原点是页面的的左上角即body的原点
区分position:relative; position:absolute; position:fixed
②当定义position:absolute;的div有父级的时候它的位移原点是父元素的左上角区分position:relative; position:absolute; position:fixed

position:relative(相对定位)

position:relative; (相对定位) 他是以自己原来的位置为原点进行的位移
position:relative; (相对定位)是相对于自身原来左上角的位置进行的位移,但是它占据的空间还是原理来的位置i区分position:relative; position:absolute; position:fixed

position:absolute(绝对定位); 和position:relative; (相对定位)对比
区分position:relative; position:absolute; position:fixed

position:fixed(固定定位)

position:fixed(固定定位)它是从游览器的可视区域的左上角进行的位移(这个比较好理解就不画图了)

相关文章:

  • 2021-09-18
  • 2021-11-23
  • 2022-01-26
  • 2022-12-23
  • 2021-10-25
  • 2022-12-23
  • 2022-01-05
  • 2022-12-23
猜你喜欢
  • 2021-09-21
  • 2022-01-26
  • 2022-12-23
  • 2021-07-23
  • 2021-05-05
  • 2021-09-09
  • 2022-12-23
相关资源
相似解决方案