CSS定位position属性的示例分析

这篇文章主要为大家展示了“CSS定位position属性的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS定位position属性的示例分析”这篇文章吧。

　　首先，我们先写一个HTML文件，利用css实现多行内容垂直居中。

　　<divclass="wrap">

　　<divclass="content">

　　<h2>helloworld</h2>

　　<h3>HELLOWORLD</h3>

　　<h4>层叠样式表</h4>

　　</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属性的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！