定位

position

阮一峰的网络日志

• static

  1. position属性的默认值
  2. 如果省略 position 属性，浏览器就认为该元素是static定位
  3. top、bottom、left、right 这四个属性无效

• relative

  1. 相对于默认位置（即 static 时的位置）进行偏移，即定位基点是元素的默认位置
  2. 搭配 top、bottom、left、right 这四个属性一起使用，用来指定偏移的方向和距离

• fixed

  1. 相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样
  2. 它如果搭配 top、bottom、left、right 这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置

• absolute

  1. 相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素
  2. 限制条件：定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html。另外，absolute 定位也必须搭配 top、bottom、left、right这四个属性一起使用
  3. absolute 定位的元素会被“正常页面流”忽略，即在“正常页面流”中，该元素所占空间为零，周边元素不受影响

• sticky

  1. sticky 跟前面四个属性值都不一样，它会产生动态效果，很像 relative 和 fixed 的结合：一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）
  2. sticky 生效的前提是，必须搭配 top、bottom、left、right 这四个属性一起使用，不能省略，否则等同于 relative 定位
  3. 规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与 sticky 元素的距离达到生效门槛，relative 定位自动切换为 fixed 定位；等到父元素完全脱离视口时（即完全不可见），fixed 定位自动切换回 relative 定位
  4. #toolbar { position: -webkit-sticky; /* safari 浏览器 */ position: sticky; /* 其他浏览器 */ top: 20px; }

包含块

1. 对于浮动元素

包含块定义为最近的块级祖先元素

2. 对于定位

• 根元素的包含块（也称为初始包含块）由用户代理建立。在 HTML 中，根元素就是 html 元素，不过有些浏览器会使用 body 作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形
• 对于一个非根元素，如果其 position 值是 relative 或 static，包含块则由最近的块级框、表单元格或行内块祖先框的内容边界构成
• 对于一个非根元素，如果其 position 为absolute，包含块设置为最近的 position 值不是 static 的祖先元素（可以是任何类型），过程如下：
  1. 如果这个祖先就是块级元素，包含块则设置为该元素的内边距边界，就是边框界定的区域
  2. 如果这个祖先是行内元素，包含块则设置为该祖先元素的内容边界。在从左向右读的语言中，包含块的上边界和左边界是该祖先元素中第一个框内容区的上边界和左边界，包含块的下边界和右边界是最后一个框内容区的下边界和右边界。在从又想做度的语言中，包含块的右边界对应于第一个框的有内容边界，包含块的左边界则取自最后一个框的左内容边界。上下边界也是一样的
  3. 如果没有祖先，元素的包含块定义为初始包含块