【大场面经】7.7（1）🍧position 的值有哪些，区别是什么

Posted on 2021-07-07 15:31  秃头少女JennieLiu  阅读(65)  评论(0)  编辑  收藏  举报

🍬position 的值有哪些，区别是什么

基本概念

文档流

​ 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。

position 的值有哪些，以及区别

  1. Static(静态）：HTML元素的默认值，不受top、bottom、left、right属性影响，元素出现在正常的文档流中
  2. Relative(相对）:相对定位。
    特点：不脱离文档流的布局，受top、bottom、left、right属性影响,只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
  3. Absolute(绝对)：绝对定位
    特点:脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(position不为static)，否则为html文档本身。以最近的开启了定位的祖先元素为参照物
  4. Fixed(固定)：固定定位。
    特点：类似于absolute，但不随着滚动条的移动而改变位置。元素的位置相对于浏览器窗口是固定位置。可以用于最边上的侧边栏滑动块什么的。