position属性介绍

 

　　（1）css中position属性自CSS2起就有了，该属性规定元素的定位类型。所有主流浏览器都支持position属性。

 

　　（2）css中position属性的可选值有四个：static、relative、absolute、fixed。下面分别进行介绍。（其实还有个inherit，不过这个是IE特有的，这里就不做讨论）

 

　　<h3id="position:static（默认值）">position:static（默认值）</h3>

 

　　1，基本介绍

 

　　（1）static是默认值。表示没有定位，或者说不算具有定位属性。

 

　　（2）如果元素position属性值为static（或者未设position属性），该元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。

 

　　2，使用样例

 

　　css:

 

　　<style>

 

　　div{

 

　　width:200px;

 

　　height:100px;

 

　　background-color:#C9FFFF;

 

　　}

 

　　</style>

 

　　html:

 

　　<div></div>

 

　　<inputtype="text"/>

 

　　我们不设置元素的postion属性值，那么默认的显示效果如下：

 

　　2345截图20180816103058.png

 

　　<divclass="position-static"></div><inputtype="text"/>

 

　　<h3id="position:relative（相对定位）">position:relative（相对定位）</h3>

 

　　1，基本介绍

 

　　（1）relative生成相对定位的元素，相对于其正常位置进行定位。

 

　　（2）相对定位完成的过程如下：

 

　　首先按默认方式（static）生成一个元素(并且元素像层一样浮动了起来)。

 

　　然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

 

　　2，样例代码

 

　　下面代码将文本输入框position设置为relative（相对定位），并且相对于默认的位置向右、向上分别移动15个像素。

 

　　css:

 

　　div{

 

　　width:200px;

 

　　height:100px;

 

　　background-color:#C9FFFF;

 

　　}

 

　　input{

 

　　position:relative;

 

　　left:15px;

 

　　top:-15px;

 

　　}

 

　　html:

 

　　<div></div>

 

　　<inputtype="text"/>






本文转载自中文网