前言：在使用css给页面进行排版美化的过程中，经常会用到pposition属性。那么，接下来我们就详细介绍一下position属性。
首先，我们先写一个HTML文件，利用css实现多行内容垂直居中。
> <divclass="wrap">
>
> <divclass="content">
>
> <h1>hello world</h1>
>
> <h2>HELLO WORLD</h2>
>
> <h3>层叠样式表</h3>
>
> </div>
>
> </div>
接下来我们使用css进行布局排版：
> .wrap{
>
> width:100%;
>
> height:400px;
>
> display:table;
>
> }
>
> .content{
>
> display:table-cell;
>
> vertical-align:table;
>
> text-align:center;
>
> }
position属性：
一**、静态定位/常规定位/自然定位static**
**作用：**使元素定位于自然流中
特点：
1、忽略top、bottom、left、right或者z-index声明
2、两个相邻的元素如果都设置了外边距，那么最终外边距=两者外边距中最大的
3、具有固定width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大到占满剩余宽度，造成的效果就是这个块水平居中
二、 相对定位relative
作用：使元素成为可定位的祖先元素
特点：
1、可以使用top/right/bottom/left/z-index进行相对定位，相对元素在自然流中的位置
2、相对定位的元素在自然流中的位置会被保留
3、任何元素都可以设置为relative，它的绝对定位的后代都可以相对于它进行绝对定位
4、可以使浮动元素发生偏移（解决两个浮动元素设置t/r/b/l无效的问题），并控制它们的堆叠顺序
三、绝对定位absolute
作用：使元素脱离自然流
特点：
1、脱离自然流
2、设置尺寸的百分比比的是最近可定位的祖先元素
3、lrtb如果设置为0，它将对齐到最近可定位祖先元素的各边（衍生水平垂直居中妙计）
4、如果没有最近可定位祖先元素，会认作为可定位祖先元素
5、z-index可以控制堆叠顺序
四、 固定定位fixed
作用：和绝对定位作用相似
特点：
1、相对于浏览器视口定位
2、固定定位元素不会随着视口滚动而滚动
3、继承absolue的特点
利用position实现子元素垂直居中
> <divclass="wrap">
>
> <divclass=""content></div>
>
> </div>
> .wrap {
>
> width: 200px;
>
> height: 200px;
>
> background: blue;
>
> position: relative;
>
> }
>
> .content {
>
> width: 100px;
>
> height: 100px;
>
> background: red;
>
> position: absolute;
>
> top: 0;
>
> bottom: 0;
>
> left: 0;
>
> right: 0;
>
> margin: autoauto;
>
> }
以上就是CSS 定位position属性详细介绍（附示例）的详细内容，
一个人学习会有迷茫，动力不足。这里推荐一下我的前端学习交流qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。整理了一份最新最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。
点击：加入
来源：oschina
链接：https://my.oschina.net/u/4380344/blog/4427227