Loading... ## 使用position定位网页元素 ### 语法 ```css position:属性值; ``` 属性值的取值范围 * static：默认值，没有定位 [无需设定偏移量] * relative：相对定位 * 设置相对定位的元素会相对它原来的位置，通过指定偏移(top/right/left/bottom)，到达新的位置 * 设置相对定位的元素仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响 * 设置相对定位的元素原来的位置会被保留下来 * 设置相对定位的元素的堆叠次序(z-index)会被提升 * 相对定位的使用场景: 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量 * absolute：绝对定位 * 使用了绝对定位的元素以它最近的一个"已经定位"的"祖先元素"为基准进行偏移 * 如果没有"已经定位"的"祖先元素"，该绝对定位的元素将会以浏览器窗口为基准进行定位 * 绝对定位的元素从标准文档流中脱离(原有的位置不会被保留)，它对其他元素的定位不会造成影响 * 一般情况下，绝对定位不会单独使用，需要配合相对定位一起使用 * fixed：固定定位 * 使用了固定定位的元素是相对于浏览器窗口进行定位 * sticky：粘性定位 * 参考网址: [https://www.jianshu.com/p/aa80021b4e20](https://www.jianshu.com/p/aa80021b4e20) * 参考网址: [https://blog.csdn.net/qq_35585701/article/details/81040901](https://blog.csdn.net/qq_35585701/article/details/81040901) * **注意: 使用了定位的元素层级提高，可以把标准文档流中的元素及浮动元素盖在下边** ## 使用z-index属性调整定位元素的堆叠次序 语法: `z-index:number;` * 属性值number的取值范围: 0/负数/正数/auto * number值越大,元素堆叠次序越靠前 * z-index的默认值是: auto ## 滤镜属性 `filter: opacity(0.5); /* 1: 不透明 0: 完全透明 */` 参考网址: [https://www.runoob.com/cssref/css3-pr-filter.html](https://www.runoob.com/cssref/css3-pr-filter.html) --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [HTML从入门到精通 - 动画](https://jbea.cn/archives/522.html) </div> 最后修改：2022 年 08 月 31 日 © 允许规范转载 赞 都滑到这里了，不点赞再走！？
