CSS-position的五个值

1. static

  • 正常的布局,即元素在文档常规流中当前布局位置。
  • 此时top,right,bottom,leftz-index属性无效。

2. relative

  • 元素先放置在未添加定位时的位置,再在不影响页面布局的前提下调整元素位置。
  • 会在元素未添加定位时的位置留下空白。不脱离文档流

3. absolute

  • 不为元素预留空间。脱离文档流。绝对定位元素相对于最近的非static祖先元素定位(一般让它的父元素为relative),当这样的祖先元素不存在时,则相对于ICB(inital container block,初始包含块)定位。
  • 绝对定位元素可以设置margins,且不与其他外边距合并。

4. fixed

  • 不为元素预留空间。脱离文档流。相对于屏幕窗口(viewport)定位。
  • 元素的位置在屏幕滚动时不会改变。
  • 当元素祖先的transform属性非none时,相对于该祖先定位。

5. sticky(实验API,尽量不要在生产环境中使用)

  • 粘性定位是相对定位(relative)和固定定位(fixed)的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。
  • 须指定 top,right, bottomleft 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,827评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,584评论 5 15
  • 大家好,我是IT修真院深圳分院第06期学员,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任...
    不二先森zZ阅读 4,347评论 0 2
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,513评论 0 5
  • 我是最近才知道猪原来是不能抬头看天的。这明明是个科学解释就像十万个为什么一样,却不知道为什么我会对这个问题念念不忘...
    c57d9983d2bf阅读 2,991评论 2 0