本文详细介绍了CSS中的定位方式，包括相对定位、绝对定位、固定定位等，并解释了它们的工作原理及如何影响页面布局。同时，还介绍了如何使用z-index属性来调整定位元素的堆叠顺序。
我们可以使用 css 的 position 属性来设置元素的定位类型，postion 的设置项如下：
- 相对定位：relative
生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移（相对于原先自己本身一个位置的偏移）
- 绝对定位：absolute
生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上 一个设置了相对或者绝对或者固定定位的父级元素来进行定位（父相子绝-父元素设置相对定位，子元素设置绝对定位），如果找不到，则相对于 body 元素进行定位。
- fixed：固定定位
生成固定定位元素，元素脱离文档流，不占据文档流的位置， 可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
- static： 默认值
没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
- inherit ：从父元素继承 position 属性的值
定义元素的属性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
定义元素层级
定位元素是浮动的正常的文档流之上的，可以用 z-index 属性来设置元素的层级
典型定位布局
- 固定在顶部菜单
- 水平垂直居中的弹框
- 固定在侧边的工具栏
- 固定在底部的按钮
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
