CSS定义元素的位置
html元素的position属性，有4个属性值，分别是static、relative、fixed、absolute
static:
1、默认值，一般不显式设置为static
2、即使设置top、bottom、left、right，元素的位置不会发生改变
3、会随着页面滚动条移动
4、代码示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>position static</title> 6 <style> 7 .static{ 8 border: 2px solid red; 9 /*position: static; 不管有没有这行代码，浏览器中看到的效果都一样，因为默认情况下，元素的position值就是static*/ 10 width: 100px; 11 height: 100px; 12 } 13 .wh{ 14 width: 100%; 15 height: 800px; 16 background-color: grey; 17 } 18 </style> 19 </head> 20 <body> 21 <h1>position static</h1> 22 <div class="static"> 23 div元素的position：static 24 </div> 25 <div class="wh"></div> 26 </body> 27 </html>
relative:
1、元素相对于它原来的位置进行移动，移动的参考物就是浏览器默认给元素渲染出的那个位置
2、需要设置top、bottom、left、right，元素的位置才会移动
3、不设置top、bottom、left、right，则元素的位置不会移动。
4、left的值可正可负，为正，则元素位置往右边移动，为负，则往左边移动。right、top、bottom也一样，可正可负
5、元素移动后，原来的位置还存在文档流中，不会被其他元素填充上去。
6、会随着页面滚动条移动
7、代码示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>position relative</title> 6 <style> 7 .relative{ 8 border: 2px solid red; 9 width: 300px; 10 height: 200px; 11 /*如果只设置position属性，而不设置top、bottom、left、right,则元素位置不会发生改变*/ 12 position: relative; 13 top:15px; 14 left:100px; 15 } 16 17 .wh{ 18 width: 100%; 19 height: 800px; 20 background-color: grey; 21 } 22 p{ 23 border: solid 1px blue; 24 } 25 </style> 26 </head> 27 <body> 28 <h1>relative</h1> 29 <div class="relative"> 30 div element position:relative 31 </div> 32 <p>div位置移动后，p元素不会填充div元素移动前的那个位置</p> 33 34 <div class="wh"></div> 35 </body> 36 </html>
fixed:
1、需要设置top、bottom、left、right，才会相对于它原来的位置进行移动，这点跟relative一样。
2、不设置top、bottom、left、right，则元素的位置不会移动。
3、元素在相对自己原来的位置移动后，页面滚动条滚动时，元素相对浏览器视图窗口的位置保持不变，即元素不会随着页面滚动条移动。
4、代码示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>position fixed</title> 6 <style> 7 .fixed{ 8 border: 2px solid blue; 9 width: 200px; 10 height: 100px; 11 /*如果只设置postion，而不设置top、bottom、left、right,则元素的位置不会发生改变*/ 12 position: fixed; 13 top:200px; 14 left: 200px; 15 } 16 17 .wh{ 18 width: 100%; 19 height: 800px; 20 background-color: grey; 21 } 22 </style> 23 </head> 24 <body> 25 <h1>fixed</h1> 26 <div class="fixed"> 27 div element position:fixed 28 </div> 29 <div class="wh"></div> 30 </body> 31 </html>
absolute:
1、移动参考物，是它的上级指定了位置的一个元素，它的上级元素可以是父级，也可以是父级的父级。
2、它的上级元素必须指定了position属性的值为relative、fixed、absolute之一(static排除在外)
3、需要设置top、bottom、left、right，元素的位置才会移动
4、一般会搭配一个position属性为relative的父级元素使用
5、代码示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>position absolute</title> 6 <style> 7 .parent { 8 border: 2px solid red; 9 width: 400px; 10 height: 300px; 11 padding: 10px; 12 position: relative; 13 } 14 15 .absolute{ 16 border: 2px solid blue; 17 width: 200px; 18 height: 50px; 19 position: absolute; 20 top: 50px; 21 left: 100px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="parent"> 27 parent element position:relative 28 <div class="absolute"> 29 div element position:absolute 30 </div> 31 </div> 32 </body> 33 </html>