说实话，CSS 定位布局技巧是前端开发中的一个重要知识点，掌握好了它，你就Neng轻松实现各种复杂的页面布局。

常见场景：吸顶导航，表格表头固定，分类标题。

参考对象：元素自身在文档流中的原始位置

默认宽度为父容器宽度的100％

position 有四个常用值：relative, absolute, fixed, sticky. 它们配合 top, right, bottom, left 来移动元素。

是否脱离文档流： 是

常见场景：回到顶部按钮，浮动客服，固定导航栏。

position : static | absolute | fixed | relative 布局确定对象的尺寸。例如,设置一个 div 对象的 height 和 position 属性,......

.fixed-btn { position: fixed; bottom: 30px; right: 20px;} . 文档流

浏览器在渲染 HTML 页面时默认顺序是从上到下从左到右把元素一个个摆放到页面上。这种默认的排列方式就叫Zuo文档流。

害，你可Neng会问，为什么百度不收录我的网站呢？这个问题嘛，说实话，影响因素hen多，比如网站内容质量、外部链接等等。你得确保你的网站内容有价值，同时也需要Zuo好SEO优化，这样才Neng提高被收录的概率。

例如：<div>,<h1>,<p>,<section>

默认独占父容器的一整行，前后元素会换行

Ke以设置宽高

<div style="background: lightblue; width: 200px; height: 50px;">块级元素</div> <div style="background: lightgreen;">我也会独占一行</div> . 行内元素

例如：<span><a><strong><em>

Ke以在一行内水平排列，直到宽度不够 才换行

不Neng设置宽高，大小由内容撑开

只Neng设置左右 margin / padding ,上下margin 不生效

<span style="background: pink;">我是行内元素</span><span style="background: orange;">我会在同行</span>: href="#">链接也是行内</a> . CSS 定位属性详解 .相对定位 - position:relative

常见场景：微调图标位置，制作“子绝父相”中的父级

.box { position: relative; top: 20px; /* 相对于原位置向下移 20px */ left: 10px; /* 向右移 10px */}

特点：是否脱离文档流：否

是否脱离文档流：是原有空间被其他元素顶替

参考对象：带定位属性的父级元素，找不到继续往上找直到找到body为止

.parent { position: relative; /* 成为子元素的参考 /}.child { position: absolute; top: ; right: ; / 相对于父容器右上角 /} . 粘性定位 - position :sticky . .sticky-nav {position :sticky ;top : ;/必须设定阀值,不然不生效*/}. 说实话,这个粘性效果挺好用的，尤其是在导航栏上。 特点. 参考对象 :屏幕. 是否脱离文档流 :达到阀值前不脱离,达到阀值后会和fixed 一样. 咱就是说,这个效果挺适合用于制作吸顶导航的,你懂的. 你可Neng会遇到这种情况,就是你的某个元素怎么也不听使唤,就是不按照你设定的样式来显示. 这个时候,你就需要检查一下,是不是你的 CSS 选择器写错了,或者是被其他样式覆盖了. 不对不对,应该是先检查元素的层级关系,以及它是否脱离了文档流. 总之,CSS 的世界里充满了各种可Neng,你需要灵活应对才行. 层叠上下文 z-index . 层级要生效,必须配合定位属性. 只Neng在兄弟元素之间相比较. 哈哈,是不是觉得 CSS hen神奇？ 通过这篇文章,你应该对 CSS 的定位布局有了geng深入的理解了吧？ 无论你是刚刚入门的前端小白，还是想巩固基础的进阶选手，相信读完dou会有所收获。