CSS 定位
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
relative
相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。buttom如果为正数，则向上移动，right如果为正数，则向左移动
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; right:20px; } .pos_top{position: relative; bottom: 40px; } </style> </head> <body> <h2>这是位于正常位置的标题</h2> <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2> <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2> <h2 class="pos_top">这个标题</h2> <h2 class="pos_bottom">这个标题</h2> </body> </html>
absolute
absolute绝对定位，相对于当前窗口的位置，有top，left，right，bottom
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> *{padding: 0;margin: 0;} .d1{width: 100px;height: 100px;background: red; position:absolute; left: 20px; top: 20px; } </style> </head> <body> <div class="d1"></div> </body> </html>
上面的div元素距离左边20px，距离上边20px，如果我们想距离顶部20px；右边20px，怎么办呢？我们可以把那两个参数替换掉就可以了
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> *{padding: 0;margin: 0;} .d1{width: 100px;height: 100px;background: red; position:absolute; right: 20px; bottom: 20px; } </style> </head> <body> <div class="d1"></div> </body> </html>
这样是不是我们的div就固定在右下角了呢？如果内容过多会不会随着滚动条滚动？ 来动手测试一下
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> *{padding: 0;margin: 0;} .d1{width: 100px;height: 100px;background: red; position:absolute; right: 20px; bottom: 20px; } .d2{height: 4000px;} </style> </head> <body> <div class="d2"> <div class="d1"></div> </div> </body> </html>
经过测试发现，会随着滚动条滚动，如果想要固定在某一个位置，就要用到fixed属性了
fixed
fixed固定定位，你想让它在哪个位置就在哪个位置，来，我们直接把上面的定位改为fixed试试
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> *{padding: 0;margin: 0;} .d1{width: 100px;height: 100px;background: red; position:fixed; right: 20px; bottom: 20px; } .d2{height: 4000px;} </style> </head> <body> <div class="d2"> <div class="d1"></div> </div> </body> </html>
刷新看看，这样是不是就实现了我们的需求，想一想，其他网站右下角有一个回到顶部的按钮，我们一点就回到了顶部，其实就是用固定定位和js做的
inherit
inherit继承，继承父元素的定位
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> *{padding: 0;margin: 0;} .d1{width: 100px;height: 100px;background: red; position:inherit; right: 20px; bottom: 20px; } .d2{height: 4000px;} body{ height: 4000px;} </style> </head> <body> <div class="d2"> <div class="d1"></div> </div> </body> </html>
发现上面的代码和没设置position没什么区别，因为我们没有给它的父元素设置定位方式，我们给父元素加上定位方式在来看看
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> *{padding: 0;margin: 0;} .d1{width: 100px;height: 100px;background: red; position:inherit; left: 20px; top: 20px; } .d2{height: 100px;width: 100px; background: green ; position: fixed; left: 100px; top: 100px;} body{ height: 4000px;} </style> </head> <body> <div class="d2"> <div class="d1"></div> </div> </body> </html>
代码解释：class="d1"的标签的定位方式为继承，而它的父元素class=d2的定位属性为固定定位fixed，所以也继承了固定定位
z-index
所有定位的方式都是有层级的，先写的定位的元素会被后写的定位的元素覆盖，例如上面继承的，红色的将绿色的覆盖掉了一点，如果要想让绿色的覆盖掉红色的，就要用到z-index了
z-index属性值有三个，分别为auto（默认值）、inherit（继承）、number（具体的数值）
z-index可以设置元素的叠加顺序，但依赖定位属性
z-index大的元素会覆盖掉z-index小的元素
z-index为auto的元素不参与层级比较
z-index被普通流中的元素覆盖
我们先来看一下不加z-index属性的效果
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> *{padding: 0;margin: 0;} .d2{height: 100px;width: 100px; background: green ; position: absolute; } .d1{width: 100px;height: 100px;background: red; position:absolute; left: 20px; top: 20px; } body{ height: 4000px;} </style> </head> <body> <div class="d2"></div> <div class="d1"></div> </body> </html>
发现红色的把绿色的遮挡住了，那我们给绿色的加上z-index
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> *{padding: 0;margin: 0;} .d2{height: 100px;width: 100px; background: green ; position: absolute; z-index: 1; } .d1{width: 100px;height: 100px;background: red; position:absolute; left: 20px; top: 20px; } body{ height: 4000px;} </style> </head> <body> <div class="d2"></div> <div class="d1"></div> </body> </html>
因为默认的z-index为0，当我们给绿色的设置为z-index为1的时候，绿色的就在上面了