目录

1. 静态定位
2. 相对定位
3. 绝对定位
4. 固定定位
5. 粘性定位

答:CSS 中总共有 5 种定位方式,它们分别是:

  1. Static Position:静态定位
  2. Relative Position:相对定位
  3. Absolute Position:绝对定位
  4. Fixed Position:固定定位
  5. Sticky Position:粘性定位

1. 静态定位

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

2. 相对定位

生成相对定位的元素,相对于其正常位置进行定位。

因此,left:20 会向元素的 LEFT 位置添加 20 像素。

3. 绝对定位

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。

4. 固定定位

生成固定定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 left, top, right 以及 bottom 属性进行规定。

5. 粘性定位

粘性定位,该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:叶继伟

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!