欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

  position属性
 
  position属性就是用来规定元素的定位类型,即把元素放置到一个静态的、相对的、绝对的、或固定的位置中。因此在position属性中它有四个属性值分别为:static、relative、absolute、fixed。接下来在文章中将具体介绍这四个属性值的用法及特点。
 
  static属性值
 
  static属性表示默认值,即没有定位,元素出现在正常的流中。忽略了top,bottom,left,right或者z-index声明
 
  
 
  <style>
 
  div{
 
  width:100px;
 
  height:100px;
 
  border:10pxsolid#ccc;
 
  }
 
  div.static{
 
  position:static;
 
  border:10pxsolidpink;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <div></div>
 
  <divclass="static">使用了position:static;</div>
 
  </body>
 
  效果图:
 
  relative属性值
 
  表示相对定位的元素,可以通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位。它是默认参照父级的原始点为原始点来定位的,若无父元素则按照上一个元素的底部为原始点进行定位。
 
  1、相对定位不会影响元素本身特性
 
  2、不会使元素脱离文档流(元素原本位置会被保留)
 
  3、没有定位偏移量时对元素无影响
 
  4、提升层级,可以使用z-index来改变一个定位元素的层级关系,从而改变元素的覆盖关系,值越大越在上面
 
  
 
  div{
 
  width:200px;
 
  height:200px;
 
  background-color:pink;
 
  }
 
  div.relative{
 
  position:relative;
 
  background-color:lightblue;
 
  left:45px;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <div>父元素
 
  <divclass="relative">子元素</div>
 
  </div>
 
  </body>





本文转载自中文网
 


如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c56191.shtml