关于css中的定位（position）
CSS定位（position）
在做web页面的时候，需要把不同元素进行排版，按照一定的位置摆放，做出一个完整的页面。解决排版主要用到的是浮动（float） 和 定位（position），浮动通常解决的是容器左右排列的问题，而定位可以解决叠加排列的问题。
CSS 定位 (position) 属性允许你对元素进行定位。
定位的基本思想很简单，定义元素相对于其正常位置应该出现的位置（relative），或者相对于父元素、另一个元素甚至浏览器窗口本身的位置（absolute）。
CSS定位的几种形式
position的取值 ：
position：static（默认）| relative | absolute | fixed | sticky
分别对应相对定位、绝对定位、固定定位、黏性定位
relative 相对定位
不脱离文档流，相对于自身静态位置通过 top (上) , bottom（下）, left（左）, right（右）定位，可以通过z-index进行层次分级（当需要一个层在上一个层在下时使用）。
如果没有定位偏移量，对元素本身没有任何影响。当元素使用position属性为relative时，不使元素脱离文档流，空间是会被保留的。不会影响其他元素的布局。left、top、right、bottom是相对于当前元素自身进行偏移的。
relative定位示例：
<html>
<head>
<style type="text/css">
div {
border: 1px solid black;
width: 200px;
height: 200px;
margin: 0 auto;
}
.position-left {
position: relative;
left: -100px
}
.position-right {
position: relative;
left: 100px
}
</style>
</head>
<body>
<div>这是正常位置的div</div>
<div class="position-left">这个div相对于其正常位置向左移动</div>
<div class="position-right">这个div相对于其正常位置向右移动</div>
</body>
</html>
absolute 绝对定位
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位父级元素，则相对于定位父级元素发生偏移，没有定位父级元素，则相对于整个文档发生偏移（绝对、相对、固定）
注：如果父级元素中有多个元素具备定位模式，那么是已离自己最近的父级元素进行偏移。
absolute定位示例：
<html>
<head>
<style type="text/css">
.position-absolute {
border: 1px solid black;
width: 200px;
height: 200px;
position: absolute;
left: 100px;
top: 150px
}
</style>
</head>
<body>
<div class=" position-absolute ">带有绝对定位的div</div>
</body>
</html>
fixed 固定定位
这里他所固定的对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
使元素完全脱离文档流
使内联元素支持宽高 （让内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响，不会受到父级元素的影响。
fixed定位示例：
<html>
<head>
<style type="text/css">
div {
border: 1px solid black;
width: 200px;
height: 200px;
}
.div1 {
position: fixed;
left: 0px;
top: 100px;
}
.div2 {
position: fixed;
top: 100px;
right: 0;
}
</style>
</head>
<body>
<div class="div1">这是固定在左侧的div</div>
<div class="div2">这是固定在右侧的div</div>
</body>
</html>
sticky 黏性定位
sticky是在浏览器窗口中进行定位的，当页面较大时，滑动滚动条，在没有到达指定位置的时候，是没有定位效果的，到达了指定位置，就变成了固定模式（fixed）。
定位偏移量 : left top right bottom , 不能单独使用，必须得配合定位模式。
sticky定位示例：
<html>
<head>
<style>
body {
height: 2000px
}
.box1 {
border: 1px solid black;
width: 200px;
height: 200px;
position: sticky;
top: 100px;
}
</style>
</head>
<body>
<div class="box1">这是一个黏性定位的div</div>
</body>
</html>
关于层次分级z-index
默认层级为0
嵌套时候的层级问题
处于嵌套中的层级比较，会先跟同级别的先比较。（比较的时候，必须有定位模式和z-index）
下一篇： 安卓仿墨迹天气往下滑动带动画效果的引导页