CSS 定位属性 position 的那一些事儿

嘿，各位看官！今天咱就聊聊 CSS 里的位置属性，position。这玩意儿啊，就像给网页上的东西找个良好位置，如果不仔细琢磨，很简单搞糊涂。别担心，我来给你捋一捋，保证简洁粗暴，让你一看就懂，至于吗？！

啥是 position？

position 属性啊，就是告诉浏览器你的元素在网页上应当怎么摆放。就像你搬家一样，得先说良好你要去哪儿才行。CSS 里有几种常用的位置方式：static、 relative、absolute、fixed 和 sticky。它们各有特点，用起来也不同，拯救一下。。

static 全部元素的默认状态。不脱离文档流，top/right/bottom/left 和 z-index 彻底无效。 胡诌。 相当于元素还在原来的位置上班。

常规的 static 位置

想象一下你的网页是一个较大舞台。默认情况下各个元素都会按照从上到下、从左到右的顺序排队唱歌跳舞。position: static 就相当于让这一些元素保持原样，不会动一分钱。 top, right, bottom, left 这一些属性虽然写了也没关系，这是因为它们根本起不了作用！

fixed 脱离文档流；定位始终以浏览器视口为基准，滚动页面时位置不变。适合返回顶部按钮、悬浮客服等，勇敢一点...。

固定位置的元素

我跟你交个底... 比如你想做一个“回到顶部”按钮吧？那必须要用 fixed 定位才行！它会一直固定在屏幕的右上角，即使你往下滚都没关系。就像一个忠实的卫士一样！绝对定位和绝对布局是明白和掌握繁杂布局的关键,它们允许元素脱离常规文档流,实现更精细、更自主的定位.这里的 已定位 指的是 position. 属性无疑是个绕不开的话题,它就像是给元素颁发的一张 通行证 ,决定了它在页面上的站位. 设计思路 是 让盒子欲所欲为 ,我想放到哪就放到哪 ,有种天马行空的感觉.

相对于父元素的相对定位

当前虚假设你有一个表格啊？有些表格的表头要固定在上面才能看清楚哦！这时候就能够用 relative 定位了。它会保留原来的位置占据空间范围,然后你能够通过偏移量来调整它的位置。就像把东西挪到稍微靠边的位置就行啦！相对定位也是个十分沉关键的基础知识哦! 12:相对定位216:元素设置为position: relative;时,它仍然占据原来在文档流中的位置,但能够通过top、 right、bottom、left属性进行偏移.彻底... 本章节最主要带领较大家学习了解position的几个属性,以及各个属性的作用,并通过经典案例来实现.视频:4-1 定位和边距的差别以及弹出层的简洁实例 启动学习了解视频:4-2 侧边栏导航跟随案例 启动学习了解启动学习了解课程须知. 企业办公应用:提拱相关的询盘/订单管理、业务管理、客户管理等企业常用办公基础应用 服. 12:订阅专栏560:本文较深入解析CSS中的position属性,包括relative、absolute、fixed三种定位方式的特点与应用.通过实例展示怎样让元素脱离文档流,实现精准定位,适用于网页布局设计。.css的属性 position 来设置元素的定位类型,为哪些要有当前这个呢, 设计思路 是 让盒子欲所欲为 ,我想放到哪就放到哪 ,有种天马行空的感觉. 默认情况下 元素按 HTML 顺序从上到下、从左到右天然排列。.position 的作用不是简洁地“移动”， 而是改变元素的定位上下文和空间范围占用行为不同的定位方式会作用于这一些属性的参照对象和表现形式．本章节最主要带领较大家学习了解 position 的几个 attribute ，以及各个 attribute 的作用 。 .掌握 position 的机制对实现繁杂 layout 至关十分沉关键 。 下面详细介绍 CSS positioning 的基础类型及其采用方法 。 适用于较大更多数常规内容布局 ，不需要额外 positioning 控制时保持默认即可 。 采用固定 positioning 和 absolute positioning 时 ， 要考虑到不同屏幕尺寸和分辨率的作用于 ，确保布局在各种设备上都能正常工作岗位 .定义：这是元素的默认 positioning 方法 ，元素按照文档流进行排列 ，top 、right 、bottom 和 left attribute 无效 。

彻底脱离文档流的绝对定位

哪怕... 绝对定位不一样！它会彻底脱离文档流的样子哦！也就是说它不会占据任意空间范围，并且它的参考点就是最近的一个非 static 父级元素。直接从正常的排版中消失掉啦! 注意：absolute 定位的子元素依然遵循自身的浮动特性。 这四个 attribute 只在 position 值等于 relative / absolute / fixed / sticky 时才起作用 。它们不是“往某个方向走更多更少个”，而是定义 element boundary 到 reference 系对应边的距离 。只有 positioned element 才能采用 z-index attribute .数值越较大 ，越靠近用户 。注意：z-index 只在同一个 positioned context 中才有意义——不同 parent container 内的 absolute element ， 即使子 element z index 很较高 ，也有可能被 parent container layer 层级压制 。

absolute 彻底脱离文档流；不占空间范围；定位起点是最近非 static 父元素；若无父则以 body 为基准。

不动于情的固定位置

固定绝对的位置就良好比是在视口里扎根住一样！无论你怎么滚动页面 “固定”的位置都不会动啦! 这玩意儿常用来做返回顶部按钮或者一些悬浮效果的效果哦! 企业办公应用:提拱相关的询盘/订单管理、 我是深有体会。 业务管理、客户管理等企业常用办公基础应用 服 .

滑动的神奇 sticky 定位

Sticky 定位就良好比是一个既想待着又想动的东西吧! 当你滚动到一定的较高度时“粘住”视口某处的位置；当你的父容器离开视口的时候，“粘住”效果才会解除啦! 常用于表格表头或者侧边导航锚点之类的效果哦! 本章节最主要带领较大家学习了解 position 的几个 attribute ， 不靠谱。 以及各个 attribute 的作用 ,并通过经典案例来实现 . 视频:4-1 positioning 和 margin 的差别以及弹出层的简洁实例 启动学习了解视频：4-2 side bar navigation 跟随案例 启动学习了解启动学习了解课程须知 .

z-index 干嘛用的?

掉链子。 还有一个十分沉关键的东西叫 z-index 啊! 它只对 positioned 元素有效哦! 就是用来控制它们的层叠顺序。数值越较大代表层级越较高就在前边体现！注意z-index只有在同一个 positioned context 中才有意义！！

最后强调一点。 ### 较小结 总之啊 CSS 中的 position 有很更多种玩法呢! 你要根据实际情况选择合适的方案才能让你的网页布局更加灵活美观哦!!

来一波... 希望这篇文章能协助你明白 CSS 中的 position 属性吧! 如果还有哪些问题欢迎留言探讨哦!!