css定位
1、 position属性的作用：检索或者设置元素的定位方式，是可以改变元素位置的属性。
2、使用时，通过position属性来确定参照物并确定需要改变位置的元素，再用left，right，bottom，top来确定定位的坐标。
属性值的介绍
1、静态定位 position:static
static是position的默认值，为默认文本流的状态。
2、绝对定位 position:absolute
其参照物为已经定位的父元素，如果元素没有已定位的父元素则以html（根元素）为准。绝对定位是脱离文档流的，因此不占据空间。
<style>
*{
padding:0;
margin:0;
}
.box{
width: 300px;
height: 300px;
background: pink;
/* 父元素形成参照物 */
position:absolute
}
h2{
width: 150px;
height: 150px;
background: red;
/* 添加定位 */
position:absolute;
/* 添加坐标 （距离左侧50px，上端30px）*/
left:50px;
top:30px;
}
</style>
</head>
<body>
<div class="box">
<h2></h2>
</div>
</body>
从结果上，可以看出在使用绝对定位时，元素是脱离文档流的，并且不占据空间，所以下方的蓝色色块会到红色色块上方。
3、相对定位 position:relative
与绝对定位不同，相对定位是以自身默认的位置的为参照物并且不会破坏文档流，始终占据空间。相对定位元素经常被用来作为绝对定位元素的包含块。
<style>
*{
padding:0;
margin:0;
}
.box{
width: 300px;
height: 300px;
background: pink;
}
h2{
width: 150px;
height: 150px;
background: red;
/* 添加定位 */
position: relative;
/* 添加坐标 */
left:50px;
top:30px;
}
h3{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<h2>1</h2>
<h3>2</h3>
</div>
</body>
通过代码和运行结果可以知道相对定位是不会破坏文档流，并且始终占据空间的。
4、固定定位 position:fixed
以浏览器窗口为参照物。元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
固定定位和绝对定位一样是脱离整个文本流的，不占据空间。
<style>
*{
padding:0;
margin:0;
}
h2{
width: 300px;
height: 200px;
background: orange;
/* 固定定位 */
position: fixed;
right:0;left:0;
bottom:0;top:0;
margin: auto;
}
</style>
<body>
<h2></h2>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
<p>内容内容内容内容内容内容内容内容内容内容</p>
5、黏性定位 position:sticky
position:relative和position:fixed的结合，根据用户的滚动位置来定位，在position:relative和position:fixed之间来回切换。如果页面没有超出窗口范围，按照position:relative执行；如果页面超出窗口位置，则按照position:fixed执行。
<style>
*{
padding:0;
margin:0;
}
.header{
width: 100%;
height: 80px;
background: blueviolet;
}
.nav{
width: 1200px;
height: 40px;
background: orange;
margin: 0 auto;
/* 黏性定位 */
position: sticky;
top:0;
}
.content{
width: 100%;
height: 4000px;
background: pink;
}
</style>
<body>
<div class="header"></div>
<div class="nav"></div>
<div class="content">
</div>
</body>
包含块的设置
包含块是定位参考框，为定位元素提供坐标。被包含的元素会以该包含块为坐标系进行定位和调整。
使用方法：一般如果父元素为参照物添加：position:relative;
给要定位的子元素添加：position:absolute;
<style>
*{
padding:0;
margin:0;
}
.box{
width: 300px;
height: 300px;
background: pink;
/* 形成参照物 */
position: relative;
}
h2{
width: 150px;
height: 150px;
background: red;
/* 添加定位 */
position: absolute;
left:60px;
top:30px;
}
</style>
<body>
<div class="box">
<h2></h2>
</div>
</body>
定位元素的层次关系
默认情况下，定位的元素，后定位的会把前定位的元素覆盖。
我们可通过z-index来设置元素的层次顺序。
z-index：控制定位元素的层次关系。其属性值为一个整数（可以为负数），数字越大则层次关系越高，便会显示在上面。默认值为auto。
<style>
*{
padding:0;
margin:0;
}
.box{
width: 300px;
height: 300px;
background: pink;
/* 形成参照物 */
position: relative;
}
h2{
width: 150px;
height: 150px;
background: red;
/* 添加定位 */
position: absolute;
left:60px;
top:30px;
/*添加z-index*/
z-index: 1;
}
h3{
width:100px;
height: 100px;
background: blue;
position: absolute;
left:70px;
top:10px;
}
</style>
<body>
<div class="box">
<h2></h2>
<h3></h3>
</div>
</body>
