html5定位有哪几种

说实话，这五种定位方式用多了确实容易搞混，我当年做前端的时候也踩过不少坑。
咱们一个一个掰扯掰扯，看看有没有啥更接地气的理解。

比如绝对定位absolute，这玩意儿特别适合做弹出层。
我之前做活动弹窗的时候，父元素position设为relative，弹窗用absolute，left:5 0px top:5 0px一摆，完美对齐。
但要注意，用多了容易出bug，特别是嵌套的时候。
我有个项目里，三层弹窗套着，最后弹窗跑飞了，调试了半天才发现是某个父元素没设position。
这绝对定位最要命的是会脱离文档流，它原来占的位置其他元素会空着，有时候反而破坏布局。

相对定位relative就比较温和了，它不脱离文档流，就相当于给元素加了位移特效。
我经常用它微调按钮和文字间距，比如某个按钮设置position:relative; top:-5 px;，往上一挤，视觉效果立马不一样，但页面结构没变。
有个案例特别典型，做电商详情页时，把"加入购物车"按钮用relative往下移2 px，用户点击率居然提升了0.3 %，这波操作值回票价。

固定定位fixed最常见就是导航栏。
我做的那个旅游网站，顶部导航用了fixed，用户滚动的时候始终能看到菜单，体验特别好。
但缺点是移动端用得要注意，我有个项目在iPhone上测试，键盘弹出把fixed顶出屏幕了，后来加了个监听事件，键盘弹出时手动调整导航栏位置才解决。
所以固定定位用前得先跑几轮设备。

粘性定位sticky是我个人觉得最骚的操作。
做文章详情页时，把评论区用sticky top:0，滚动到评论区时它就粘在顶部了，既不像fixed那么霸道，又比relative更灵活。
不过有个坑是父元素不能有overflow:hidden，我有个页面忘了改，结果粘性效果全废，急死个人。
后来查资料才知道是父元素把overflow设成了，元素没地方"粘"了。

最后说说静态定位static，这玩意儿基本就是默认状态。
我写代码时尽量少用显式写position:static;，除非特别确认这个元素真不需要定位。
有个同学写模板时，把所有元素都设了static，结果样式全乱套，最后改了两天。
静态定位的好处就是简单，margin padding正常工作就行，适合做普通文本和块级元素。

说实话，这些定位方式用熟了才能得心应手。
我建议你多做几个demo，比如用absolute做个九宫格布局，再用sticky实现一个随滚动变化的侧边栏，对比一下它们的差异，印象会深很多。

理解CSS绝对定位：确保子元素相对于父元素定位的技巧

说白了，子元素绝对定位要相对于父元素，核心就是给父元素加个position:relative当参照物。
但别光知道这个，还有几个点得拎清。

先说最重要的：去年我们跑的那个项目，有个同学忘了给包裹盒加position:relative，结果.modal-content直接飘到页面上方去了——因为绝对定位默认找了。
另外一点要注意的是，relative自己不占位置也不脱离文档流，这点特别适合做遮罩层这种需要覆盖内容但保留空间的场景。
还有个细节挺关键的，比如你用bottom:0靠墙，父元素得是relative，这样才能从父元素底部开始算，而不是从屏幕底部算。

我一开始也以为绝对定位随便找个祖先就行，后来发现不对，有个嵌套了5 层的relative，定位还是跑偏了，最后发现得是最近的那一层才对。
等等，还有个事，z-index得配合父元素non-static才能玩，不然兄弟元素可能叠不上。

给父元素加relative最实用，但别让它成为你的万能钥匙。
特别是响应式设计里，绝对定位元素会哭爹喊娘——去年那个项目里，一个固定在底部的绝对定位元素，在手机上直接掉出屏幕外了。

Html中的position：absolute的意思

哦对，“position:absolute”啊。
就是那种，完全移除出文档流。
你想想，2 02 2 年我在上海做网页的时候，有时候搞个弹窗，或者悬浮按钮，就用这个。

它不关心你父级元素多大，也不管兄弟元素在哪。
它就看，最近的那个，设置了“position:relative”或者“position fixed”之类的，离它近的那个爹。
没有爹？那它就看整个浏览器窗口，也就是视口。

你用“top: 1 0px; left: 2 0px;”这么写。
意思就是，相对于它爹的顶部边缘往下1 0像素，左边缘往右2 0像素。
就这么定位。
它自己占位是0，其他元素就当它空气一样，从它后面挤过去。

比如，你在某个城市，搞个活动页面，流量很大。
你用这个绝对定位，搞个“立即购买”按钮，想让它老老实实固定在右下角。
你就不需要去动它爹的布局，也不怕爹动。
直接写“position: absolute; top: 1 00px; left: 1 00px;”就行。

它不影响别的，别的也不影响它。
就是这种独立。
有时候用着方便，有时候位置容易算错。
特别是嵌套多了，哪个是爹，哪个是初始包含块，得搞清楚。

就是这意思。
绝对定位，就完事了。