然后我们在分析一些固定定位的特点
标签：
原文:深入学习CSS中如何使用定位CSS中定位介绍
position属性在英文单词中暗示位置的意思，在CSS中主要感化设置元素的定位。
CSS中一共有3种定位如下：
属性值 描述fixed 设置固定定位。
relative 设置相对定位。
absolute 设置绝对定位。
固定定位实践
在实践固定定位之前我们先看看代码布局是什么样子的呢。
代码块
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 100px; height: 100px; background-color: red; margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color:springgreen; margin: 0; padding: 0; } </style> </head> <body> <h1 class="box"></h1> <div></div> </body> </html>
功效图
此刻笔者将h1元素设置为固定定位，看看和上面的布局实践有什么区别，然后我们在分析一些固定定位的特点。
代码块
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ position:fixed; width: 100px; height: 100px; background-color: red; margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color:springgreen; margin: 0; padding: 0; } </style> </head> <body> <h1 class="box"></h1> <div></div> </body> </html>
功效图
固定定位特点分析如下：
固定定位，它是相对付浏览器窗口进行设置定位，不管页面如果滚动，固定定位的元素位置不会受到任何影响。
固定定位的元素特点：它已经脱离了标准文档流。
固定定位的元素特点：它的层级比标准文档流的元素要高，所以我们给h1标签设置了固定定位会压盖到div标签。
固定定位的元素特点：h1标签在div标签之上，所以固定定位的元素已经不再占用任何空间。
相对定位实践在实践相对定位之前我们先看看代码布局是什么样子的呢。
代码块
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位</title> <style> .box{ width: 400px; height: 300px; border: 1px solid darkorange; } .box div{ width: 100px; height: 100px; } .div1{ background-color: red; } .div2{ background-color: slateblue; } .div3{ background-color: springgreen; } </style> </head> <body> <div class="box"> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </div> </body> </html>
功效图
此刻笔者将class属性值为.div2元素设置为相对定位，，看看和上面的布局实践有什么区别，然后我们在分析一些相对定位的特点。
代码块
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32197.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")