WEB前端基础——绝对定位、相对定位

相对定位

相对位置，是指相对于盒子在原本定位体系下的位置

将盒子的position属性设置为relative，以启用相对位置

盒子启用相对位置，起始位置为元素本身位置的左上角，移动后会保留盒子的本身的位置，下面的常规流盒子不会移动。

视口

浏览器的可视 窗口

绝对定位

概述

• 当浮动元素被设置为绝对定位

  属于绝对定位，float属性被强制设置为none

• 绝对定位元素对其他元素的影响

  绝对定位元素不会对其他任何元素造成任何影响

• 绝对定位元素的位置

  可通过left、top、right、bottom来设置（都可以设置负值）

  固定位置

  position：fixed；

  元素的包含块：视口；（即：移动的起始位置为视口的左上角）

  偏移量的设置（移动）

  起始位置是视口的左上角

  适用场景：

  pc端：页面头部

  移动端：footer

  以下五个情况的元素，推荐为aside

  1.AD（广告）

  2.侧边栏

  3.目录

  4.回到顶部

  5.即时通讯

  绝对位置

  position：absolute；

  寻找包含块：包含我，离我最近元素的position值不等于static。

  适用场景：2个及以上的标签需要重叠在一起的时候