[分享]css中将层的位置调动

CSS中可以通过调整层的位置来实现页面布局的不同效果。常见的层位置调整方式有相对定位、绝对定位以及浮动。/ 相对定位 / :relative; top:10px; left:20px; / 绝对定位 ...

CSS中可以通过调整层的位置来实现页面布局的不同效果。常见的层位置调整方式有相对定位、绝对定位以及浮动。

/* 相对定位 */
position:relative;
top:10px;
left:20px;

/* 绝对定位 */
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

/* 浮动 */
float:left; 

相对定位可以通过设置top、bottom、left、right属性来将层在当前位置进行微调，而不影响其他元素的位置。

绝对定位则是将层跟随其最近的“定位祖先”进行定位，如果没有“定位祖先”，则以页面作为其“定位祖先”。通常需要设置top、bottom、left、right属性来确定层的位置。

浮动是将层归为浮动元素，跟随页面流向漂浮位置。使用浮动时，需要通过clear属性来避免页面布局出现异常。

.clearfix:before,.clearfix:after{
  content:"";
  display:table;
}
.clearfix:after{
  clear:both;
}
.clearfix{
  *zoom:1;
} 

以上是一种清除浮动的方式，将其添加到浮动元素或其父元素上即可避免出现清流问题。