欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  要在元素上使用定位,必须首先声明其位置property,该位置指定用于元素的定位方法的类型。使用position属性值,使用top,bottom,left和right属性定位元素。它们的位置也取决于它们的位置值。(推荐课程:css视频教程)
 
  定位值有五种类型:static(静态的)、relative(相对的)、fixed(固定的)、absolute(绝对的)、sticky(黏性的)
 
  static(静态的)
 
  默认情况下,HTML元素定位为静态,元素根据文档的正常流程定位;静态定位元素不受顶部,底部,左侧和右侧属性的影响。一个元素用position:static定位不会有其他特殊的定位方式。
 
  用于将位置设置为静态的CSS是:
 
  position:static;
 
  接下来是使用静态位置值的示例:
 
  
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <style>
 
  body{
 
  color:WHITE;
 
  font:Helvetica;
 
  width:420px;
 
  }
 
  .square-set,
 
  .square{
 
  border-radius:15px;
 
  }
 
  .square-set{
 
  background:darkgrey;
 
  }
 
  .square{
 
  position:static;
 
  background:Green;
 
  height:70px;
 
  line-height:40px;
 
  text-align:center;
 
  width:90px;
 
  }
 
  </style>
 
  </head>
 
  <body>
 
  <divclass="square-set">
 
  <figureclass="squaresquare-1">SQUARE1</figure>
 
  <figureclass="squaresquare-2">SQUARE2</figure>
 
  <figureclass="squaresquare-3">SQUARE3</figure>
 
  <figureclass="squaresquare-4">SQUARE4</figure>
 
  </div>
 
  </body>
 
  </html>

360截图20181105094735142.jpg




本文转载自中文网
 

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