定位 (position)
元素的定位属性
元素的定位属性主要包括定义模式和边偏移两部分。
1、边偏移
| 边偏移属性 | 描述 |
|---|---|
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| right | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相当于其父元素左边线的距离 |
也就是说，以后定位要和这偏移量配合使用，比如 top: 100px; left: 30px;等等
2、定位模式
在css中，position属性用于定义元素的定位模式，其基本语法格式如下:
选择器{position: 属性值;}
position属性的常用值
| 值 | 描述 |
|---|---|
| static | 自动定位(默认的定位方式) |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其上一个已经定位的父元素进行 |
| flxed | 固定定位，相对于浏览器窗口进行定位 |
position: static（静态定位）
静态定位（默认值）
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态定位，所谓静态位置就时各个元素在HTML文档流中默认的值。
白话：就时网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。
在静态定位状态下，无法通过边偏移属性来改变元素的位置。
position: relative（相对定位）
相对定位（自恋型）
相对定位是将元素相对于在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但它在文档流中的位置依然保留。
注意：
1、相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来占有的位置，继续占有。
2、其次，每次移动位置，是以自己的左上角为基点移动（相对于自己来移动位置），就是说，相对定位的盒子仍然在标准流中，它后面的盒子 仍然以标准流方式对待它。（相对定位不脱标）。
如果说浮动的目的是让多个块级元素在一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。
相对定位占有位置是不脱标的。
position: absolute（绝对定位）
绝对定位 （拼爹型）
绝对定位的元素的位置相对于最近已经定位的父级元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
绝对定位是完全脱标的，不占有位置 （漂起来的）。
绝对定位父亲没有定位，孩子以浏览器为基准点对齐。
绝对定位父亲又定位，孩子以最近的带有定位的父级为基准点对齐（absolute和relative都可以）。
子绝父相
如果给父亲加绝对定位影响布局，所以给父级加相对定位。
父亲加相对定位，孩子加绝对定位，最好。
定位的盒子水平居中
加了绝对定位过的盒子margin: 左右 auto;不起作用。
定位盒子的水平居中的算法
1、先让子盒子走父盒子的width的一半及left: 50%;。
2、再让子盒子向反方向走自己宽度的一半 （外边距margin-left: 负的自身一半;）。
定位的盒子垂直居中
1、先让盒子走父级盒子的height一半及top: 50%;
2、在让子盒子向反方向走自身height一半 （margin-top: 负的自身一半;）。
相对定位于绝对定位的使用
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.da {
width: 800px;
height: 400px;
background-color: #000;
border: 1px solid #ccc;
margin: 20px auto;
position: relative;
}
.xiao {
width: 800px;
height: 400px;
}
.da a{
display: inline-block;
width: 64px;
height: 64px;
background-color: rgba(0,0,0, .3);
position: absolute;
top: 50%;
margin-top: -32px;
}
.l {
left: 0;
}
.r {
right: 0;
}
ul {
width: 140px;
height: 20px;
background-color: rgba(255,255,255, .4);
position: absolute;
bottom: 10px;
left: 400px;
margin-left: -70px;
border-radius: 20px 20px;
line-height: 20px;
}
ul li{
list-style: none;
float: left;
height: 10px;
width: 10px;
background-color: rgba(255,255,255, .5);
margin:5px;
border-radius: 50%;
}
.current {
background-color: #f10215;
}
</style>
</head>
<body>
<div class="da">
<img src="1.jpg" class="xiao" alt="">
<a href="1.png" class="l"><img src="1.png" alt=""></a>
<a href="2.png" class="r"><img src="2.png" alt=""></a>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>position: fixed（固定定位）
固定定位（认死理型）
固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的位置，不管浏览器滚动条如何滚动也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口固定的位置。
固定定位有两点：
1、固定定位的元素和父级元素没有任何关系，只认浏览器。
2、固定定位完全脱标，不占有位置，不随滚动条滚动。
1e6等低版本浏览器不支持固定定位。
固定定位案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,a{
list-style: none;
text-decoration: none;
}
.w{
width: 50%;
margin: 0 auto;
}
nav{
width: 100%;
height: 41px;
background: #FCFCFC;
border-top: 3px solid #FF8500;
border-bottom: 1px solid #edeef0;
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
nav a{
display: inline-block;
height: 41px;
line-height: 41px;
font-size: 14px;
color: #4c4c4c;
text-decoration: none;
padding: 0px 15px;
}
nav a:hover{
background: #eee;
}
.zx{
height: 2000px;
background-color: skyblue;
margin: 45px auto;
position: relative;
}
.new{
position: absolute;
left: 50%;
top: 200px;
margin-left: -119px;
height: 294px;
width: 238px;
border: 1px solid #D9E0EE;
border-top:3px solid #FF8400;
}
h3{
height: 35px;
font-size: 16px;
font-weight: normal;
line-height: 35px;
border-bottom: 1px solid #d9e0ee;
padding-left: 12px;
}
.new img{
width: 220px;
height: 160px;
margin: 7px 0 0 9px;
}
.new ul{
margin-left: 8px;
}
.new ul li{
padding-left: 12px;
line-height: 26px;
background: url("1.png") no-repeat left center;
background-size: 5px 5px;
}
.new ul li a{
font-size: 12px;
color: #666;
}
.cebian{
position: fixed;
margin: 40px 100px;
}
.cebian ul li{
height: 50px;
width: 100px;
line-height: 50px;
font-weight: 400;
font-size: 18px;
text-align: center;
border-radius: 10%;
cursor: pointer;
}
.cebian ul li:hover{
background-color: #f10215;
color: #fff;
}
.cebian .c_red{
background-color: #f10215;
color: #fff;
}
</style>
</head>
<body>
<nav>
<div class="w">
<a href="">首页</a>
<a href="">手机新浪网</a>
<a href="">网站导航</a>
<a href="">三个字</a>
</div>
</nav>
<div class="cebian">
<ul>
<li class="c_red">热门</li>
<li>头条</li>
<li>视频</li>
<li>新鲜事</li>
<li>榜单</li>
<li>搞笑</li>
<li>创意</li>
<li>社会</li>
<li>工艺</li>
<li>健身</li>
<li>时尚</li>
<li>电影</li>
</ul>
</div>
<div class="w zx">
<div class="new">
<h3>搜素趣图</h3>
<img src="3f.jpg" alt="">
<ul>
<li><a href="#">你好明天 会更好</a></li>
<li><a href="#">你好明天 会更好</a></li>
<li><a href="#">你好明天 会更好</a></li>
</ul>
</div>
</div>
</body>
</html>
z-index（叠放次序）
当多个元素同时设定时，定位元素之间有可能会发生重叠。
在css中想要调整重叠定位元素的堆积顺序，可以对定位元素应用z-index，层叠等级属性其取值可为正整数，负整数和0。
注意：
1、z-index的默认值属性为0，取值越大，定位元素在层叠元素中越居上。
2、如果取值相同，则根据书写顺序，后来者居上。
3、后面数据一定不能加单位。
4、只要相对定位，绝对定位，固定定位，才有此属性，其余标准流，浮动，静态定位都没有此属性，亦不可指定此属性。
四种定位总结
| 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置的基准 |
|---|---|---|---|
| 静态定位static | 不脱标，正常模式，占有位置 | 不可以 | 正常模式 |
| 相对定位relative | 不脱标，占有位置 | 可以 | 相对自身的位置 |
| 绝对定位absolute | 脱标，不占有位置 | 可以 | 相对于定义父级元素移动位置 |
| 固定定位fixed | 脱标，不占有位置 | 可以 | 相对于浏览器移动位置 |
定位模式
和浮动一样，元素添加了绝对定位和固定定位之后，元素模式也发生转换，都转化为，行内块模式。
因此，比如说行内元素如果添加了绝对定位或固定定位和浮动后，可以不用转化模式，直接给高度和宽度就可以了。