position : 设置定位方式
跟『定位』相关的有一些属性，最重要的一个是『position』，它主要是设置『定位方式』。
而定位方式最重要的是设置『参照物』.
配合 position 使用的有这些属性:
| 属性名 | 值 | 描述 |
| top | 元素上边缘距离参照物边缘的距离 | |
| right | 元素右边缘距离参照物边缘的距离 | |
| bottom | 元素下边缘距离参照物边缘的距离 | |
| left | 元素左边缘距离参照物边缘的距离 | |
| z-index | ||
| position | static | 静态的，是元素默认的，比如block是换行，inline是同行。 |
| relative | 相对定位 | |
| absolute | 绝对定位 | |
| fixed | 固定定位 |
top,right,bottom,left,z-index 必须给position设置，如果不是一个定位元素，设置这些属性是不起效果的。
top/right/bottom/left
设置『元素边缘』到 『参照物边缘』的距离
绿色线框区域为参照位置。
为什么不用x,y 定位，而选用 top right bottom left来定位呢？ 如果要把红色区域定位到右下角，还得计算红色区域的大小。
举个栗子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>位置</title> <style type="text/css"> .sample{ background-color: pink; } .sample{ position: absolute; } /* 上边缘距离参照物(页面顶部) 距离30px, 左边缘距离参照物(页面左边) 距离30px */ .sample{ top: 30px; left: 30px; } /* 下边缘距离参照物(页面底部) 距离30px, 右边缘距离参照物(页面右边) 距离30px */ .sample{ bottom: 30px; right: 30px; } </style> </head> <body> <div class="sample">sample</div> </body> </html>
z-index
配合position 来使用的，设置元素 在 『Z轴』 上的排序
z-index 默认是 0
是不是z-index 越大的就越放在上面呢？ 不一定，因为 z-index 还有个 『栈』的概念。
在父元素的 z-index 相等默认为 0 的情况下，子元素 z-index越大的 越靠近上方。 而当父元素本身 比较小时，子元素再大也是小于其他 z-index 较大的元素的子元素。
右边的图这就相当于两副扑克牌摞在一起， 下面牌盒里的牌，无论怎么内部变换位置都不可能 高于上面牌盒中的牌。
举个栗子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>z-index</title> <style type="text/css"> .sample0,.sample1{ position: absolute; width: 200px; line-height: 150px; text-align: center; } .sample0{ background-color: #ff0; } .sample0{ z-index: 1; } .sample1{ background-color: pink; } .sample1{ top: 100px; left: 100px; } .sample1{ z-index: 99; } .container0,.container1{ position: relative; } .container0{ z-index: 99; } .container1{ z-index: 1; } </style> </head> <body> <div class="container0"> <div class="sample0">sample 0</div> </div> <div class="container1"> <div class="sample1">sample 1</div> </div> </body> </html>
两个绝对定位的元素， z-index 值大的元素一定在 z-index 值小的元素的上方。 ×
position: relative 相对定位
相对定位的元素，仍在文档流中。在文档流中就是按照文档流中的顺序进行排列，即块级元素换行排列，行级元素同行排列。
相对定位的元素，参照物为元素本身。
position : relative 使用最多的场景: 绝对定位元素的参照物
举个栗子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>position_relative</title> <style type="text/css"> .div1,.div2,.div3{ width: 300px; height: 80px; margin:10px 10px 0px 10px; } .div1{ background-color:#ff9e3e; } .div2{ background-color:#ff7b2e; position: relative; /* top: 10px; left: 20px;*/ color: white; font-family: "Microsoft YaHei"; font-size: 22px; } .div3{ background-color:#ff9e3e; } </style> </head> <body> <div class="div1"></div> <div class="div2">position: relative;</div> <div class="div3"></div> </body> </html>
去掉 对top 和 left 的注释后:
position: absolute 绝对定位
绝对定位的元素，默认宽度为内容宽度
绝对定位的元素，脱离文档流
绝对定位的元素，参照物为第一个定位祖先 / 根元素
绝对定位元素的参照物是他的父元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>相对定位</title> <style type="text/css"> .container{ width: 400px; line-height: 2; border: 1px dashed #aaa; position: relative; } .sample{ background-color: pink; } .sample{ position: absolute; } .sample{ bottom: 10px; left: -30px; } </style> </head> <body> <div class="container"> <div>相对定位元素的前序元素</div> <div class="sample">sample</div> <div>相对定位元素的后序元素</div> </div> </body> </html>
常用场景: 布局 - 轮播头图
举个栗子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播头图</title> <style type="text/css"> .is{position: relative;width: 480px;} .is.img{display: block;} .is .title{position: absolute;bottom: 0; margin: 0;width: 100%;line-height: 45px; background-color: #000;opacity: 0.7;} .is .controls{position: absolute;bottom: 18px; right: 10px;line-height: 10px;} .is .controls span{display: inline-block; width: 10px;margin: auto 1px; height: 10px; border-radius: 10px; background-color: gray;} .is .controls span.cur{background-color: #fff;} </style> </head> <body> <div class="is"> <img src="红茶_b.jpg"> <p class="title"><a href="asfas">老徐视线：北京潮女出门逛街不穿内衣</a></p> <div class="controls"> <span></span><span class="cur"></span><span></span><span></span><span></span> </div> </div> </body> </html>
position: fixed 固定定位
默认宽度为内容宽度
脱离文档流，不在占据原来的位置，它下面的元素会占据他的位置。
参照物为 『视窗』
举个栗子:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>fixed定位</title> <style type="text/css"> .container{ /*position: relative;*/ border: 1px dashed red; width: 400px; line-height: 2; margin: 200px; height: 1000px; } .sample{ background-color: pink; } .sample{ position: fixed; bottom: 0; left: 10px; } </style> </head> <body> <div class="container"> <div>绝对定位元素的前序元素</div> <div class="sample">sample</div> <div>绝对定位元素的后序元素</div> </div> </body> </html>
粉红色div，display:fixed 相对于视窗 底部0, 左侧10px。 固定在那个位置不动。
布局--固定顶栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>固定顶栏</title> <style type="text/css"> body{ margin: 0;line-height: 1.8; } body{padding-top: 50px;} .top{ height: 30px; background-color: pink; color: #fff; } .top{ position: fixed;top: 0;width: 100%;height: 50px; } .main{ background-color: #bebebe; height: 1000px; } </style> </head> <body> <div class="top">top bar</div> <div class="main">main content area</div> </body> </html>
也可以用在回到顶部，购物车图标等位置.
布局--遮罩
核心代码
<div class="mask"></div>
.mask{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;}
举个栗子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>遮罩</title> <style type="text/css"> .mask{ position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background-color: #000; opacity: 0.3; } .content{ height: 3000px; } </style> </head> <body> <div class="mask"></div> <div class="content">content area</div> </body> </html>
布局: 三行自适应布局
顶栏：固定在窗口最上面的。
foot： 固定在窗口最下面的。
内容区：是自适应的。
滚动条：出现在内容区。
核心代码:
<div class="head">head</div> <div class="body">body</div> <div class="foot">foot</div>
.head{ position: absolute; top: 0; left: 0; width: 100%; height: 100px; } .body{ position: absolute; top: 100px; left: 0; bottom: 100px; right: 0; } .foot{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; }
布局--两列布局
块级元素同行显示
在文档流中(如果不在文档流中，foot就会占据 main 区域位置)
怎么做呢？ 需要用到float