定位就是将盒子模型按指定位置加载
相对定位，不脱离标准流，绝对定位和固定，定位是脱离标准流的。
```
position:relative;
```
作用：设置盒子针对某个参考元素进行位置偏移设置
属性值：
relative: 相对定位
absolute: 绝对定位
fixed: 固定定位
如果定位的元素想要发生位置偏移，必须搭配偏移量属性进行设置
水平方向设置： left, right //从外往内走
垂直方向：top bottom //从外往内走
1.相对定位
属性值：relative 相对的意思
语法：
```
position
:relative ；
left:像素值；
right : 像素值；
top: 像素值；
bottom: 像素值；
```
相对定位的性质：是不脱标准状态的，不会让出原始位置，盒子会在新的指定位置加载。
### 需要注意的是：
偏移量属性是有正负之分的
正数：表示偏移和属性名正好相反
负数：表示偏移方向和属性名正好相同
<br/><br/>
<h3>注意：在水平方向不能同时设置left和right属性，如果同时设置，只会加载left属性，垂直方向如果top和bottom同时设置，只会加载top属性。
</h3>
<br/><br/>
参考元素：自身盒子的原始位置
参考代码：
```
<style>
*{
margin: 0;
padding: 0;
}
p{
width:100px;
height:100px;
background-color:cyan;
margin:5px;
}
p.current{
background-color: darkgreen;
position: relative;
left:100px;
top:100px;
}
</style>
<title>Document</title>
</head>
<body>
<p></p>
<p class="current"></p>
<p></p>
</body>
```
效果：
上图中：
<p style="color:red">绿色盒子是相对定位的，元素是没有脱离标准流的，移动之前的位置还保留并没有被后面元素挤上去此时盒子的显示效果，以自身为基准向右向下分别偏移了100PX
</p>
position: relative;
left:100px;
top:100px;
##
## 位置为负数代码：
```
*{
margin: 0;
padding: 0;
}
div{
width:300px;
margin:100px auto;
}
p{
width:100px;
height:100px;
background-color:cyan;
margin:5px;
}
p.current{
background-color: darkgreen;
position: relative;
left: -50px;
top:-50px;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<p></p>
<p class="current"></p>
<p></p>
</div>
</body>
```
效果图：
效果部分：
position: relative;
left:-50px;
top:-50px;
<br/><br/>
## 示例：绿色元素块各偏移100px;
left组合top:使用的是偏移之前的左上顶点作为参考点。
left组合bottom:使用偏移前的左下顶点作为参考点。
fight组合top:使用偏移前的右上顶点作为参考点。
fight组合bottom:使用偏移前的右下顶点作为参考点。
 <p>
- 简介
- 文字三属性(颜色，字号，字体）
- 盒子三属性（width , height, background-color）
- CSS引入方法
- CSS选择器
- css高级选择器
- CSS的继承性
- 颜色属性color
- 字体font-family
- 字号font-size
- 文字在盒子行高 line-height
- 字体加粗font-weight
- 字体样式font-style
- 文本段落对齐text-align
- 文字修饰（上划线下划线中划线 text-decoration）
- 文字缩进text-indent
- 盒子模型的宽度与高度width，height
- 内边距padding
- 边框border
- 外边距margin
- 清除默认样式
- 盒子height高度属性拓展
- 文字在盒子里居中text-align:center
- 盒子在盒子里的水平居中
- margin塌陷
- 标准文档流display
- 浮动float
- 浮动元素性质
- 浮动贴边原理
- 浮动元素的标准流问题（文字围边效果）
- 清除浮动
- 清除浮动影响二： clear属性
- 清除浮动overflow方法
- 伪类标签
- background-color背景颜色属性
- background-image 背景图片调用
- background-repeat 背景图平铺状态
- background-position背景定位
- background-attachment背景附着
- background综合语法
- 相对定位position:relative
- 绝对定位position:absolute
- 定位压盖顺序
- CSS制作LOGO超链接妙招
- CSS公共类的继承性
- em单位
- 媒体查询
- flex布局