总结

一.定位:

1.属性:position

取值:relative

    absolute

    fixed

2偏移量:根据不同的定位方式实现元素位置的摆放

top  bottom  left  right(属性)

二.相对定位:相对于它原来位置偏移某个距离

  position:relative

通过偏移属性来实现位置的微调

  使用场合:位置微调

三.绝对定位:position:absolute

  1.绝对定位的元素会脱离文档流,不占据页面空间

  2.绝对定位的元素会相对于最近的已经定位的祖先元素实现位置的初始化

  3.如果没有已经定位的祖先元素,那么它的位置就相对于最初的包含块实现位置的初始化

四.固定定位:position:fixed

  1.将元素固定在页面的某个位置

  2.脱离文档流、不占据页面高度

  3.固定定位的元素不随着页面的滚动而滚动

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • CSS的position总是属性很容易让人弄混~ 为了仔细区别它们,所以今天总结一下CSS的position属性~...
    fehysunny阅读 2,956评论 0 7
  • 以下文章是我在网上收集的内容,为了记录自己的学习以及为了以后不到处找而记录下来,如果对你有用,请感谢写这些文章的前...
    DCbryant阅读 953评论 0 2
  • 本文主要讲述 CSS&HTML 中最核心的几个概念,包括:HTML关键的几个元素、CSS盒模型、position、...
    别再骗自己阅读 750评论 0 1
  • 早起:4:55 读经:《黄帝内经》素问.上古天真论篇第一、《孙子兵法》用间篇第十三、朱子治家格言。 德之读经:易经...
    道之尊德之贵阅读 195评论 0 1