#转载请先留言联系
-
定位
HTML中的position属性可以对元素进行定位，通过position的不同的值，可以配合方位属性，让元素显示页面中的任何一个位置。
position有四个值：
static，默认值，去除元素的定位。也就是不进行定位
relative，相对定位，元素相对于自身原来的位置进行定位。
absolute，绝对定位，元素相对于当前父元素进行定位。
fixed，固定定位，元素相对于浏览器页面窗口进行定位。
怎么定位？css中提供了四个不同方位属性给我们进行定位。
top：表示距离顶部指定的长度
bottom:表示距离底部指定的长度
left：表示距离左边指定的长度
right：表示距离右边指定的长度
示例：
1.relative定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width:200px; height: 200px; background: #000; position: relative; /*让元素相对于自身原有的位置进行定位*/ top:100px; /*向下移动100px*/ left: 100px; /*向左移动100px*/ /*定位中，left与right,top与bottom一般不同时使用*/ } </style> </head> <body> <div class="box"></div> </body> </html>;
2.absolute定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 500px; height: 500px; background: blue; position: absolute; top: 100px; left: 100px; } .son{ width: 100px; height: 100px; background: black; position: absolute; top: 200px; left: 200px; } </style> </head> <body> <div class="box"> <div class="son"></div> </div> </body> </html>
absolute定位有一个很常用的用途，就是当希望子元素在父元素的正中央时，可以这样操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 500px; height: 500px; background: blue; position: absolute; top: 100px; left: 100px; } .son{ width: 100px; height: 100px; background: black; position: absolute; left: 0; /* 注意不要漏了上下左右为0，否则不会成功 */ right: 0; top: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="box"> <div class="son"></div> </div> </body> </html>
3.fixed定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .one{ width: 100px; height: 300px; background: blue; position: fixed; right: 0; top: 300px; } .two{ width: 100px; height: 300px; background: blue; position: fixed; left: 0; top: 300px; } </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>
设置了定位后可以设置层级。
-
层级
通过z-index进行设置，所有的元素的z-index默认值为0，我们可以通过z-index，设置不同的值来控制定位元素之间的覆盖。值越大的，层级越高，值越小，层级就越低，如果定位元素的层级为-1，则会被普通没有定位的元素进行覆盖。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .one{ width: 100px; height: 200px; background: red; position: absolute; } .two{ width: 100px; height: 100px; background: yellow; position: absolute; z-index: 1; } .three{ width: 100px; height: 300px; background: blue; position: absolute; z-index: -2; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> </html>