css脚本中position属性起什么作用呢?


摘要:
下文讲述css代码中position属性的功能及示例说明,如下所示:


position属性的功能说明:

position属性在css2中已经存在,但是在css3中增加了很多的属性值;
position属性的功能:
设置指定元素的定位,
常结合
z-index,
top,
left,
bottom,
right 一起使用,让元素处于html文档的指定位置


position属性的语法:
static|relative|absolute|fixed|center(css3)|page(css3)|sticky(css3)
—-参数值说明—-
static:
元素按html渲染的方式显示html标签,top,right,bottom,left属性对元素不会产生任何作用
relative:
元素按html渲染的方式显示html标签,并且参照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的任何元素。
absolute:
元素脱离当前html渲染流,使用top,right,bottom,left属性进行绝对定位,盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。
fixed:
元素脱离当前html渲染流,使用top,right,bottom,left属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。
center:
元素脱离当前html渲染流,使用top,right,bottom,left属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠(CSS3)
page:
盒子的位置计算参照absolute。盒子在分页媒体或者区域块内,盒子的包含块始终是初始包含块,否则取决于每个absolute模式(CSS3)
sticky:
对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。
该属性值使元素贴在指定的位置(CSS3)

例:
使用position属性对元素进行定位的示例分享

 <meta charset="utf-8" />
<style>
div{ 
    position:absolute;
    height:180px;
    width:200px;
    line-height:80px;
     top:150px;
     left:20px;
    background:green;
    color:white;font-weight:bold;
}
</style>

<p>
 maomao365.com <br />
 CSS position属性的示例说明
</p>
<hr />
<div>position绝对定位</div>
css position属性示例说明

css position属性示例说明