CSS定位详解-优快云博客

float属性：使用了float属性之后就会脱离标准流，没有使用的就继续按照标准流的方式进行排列， clear属性可以消除float所带来的影响。当出现往下面挤的情况时，HTML文档里面排在前面会在上面，后面的会在下面。 clear可以设置为left right和both 要设置在不想影响的标签里面。 css定位 static 默认属性就是按照标准流包括浮动方式来定位。 relative 相对定位，以标准流为基础在他原本的位置上进行偏移。相对定位的盒子，仍然在标准流中后面的盒子将以标准流的方式对待他。 absolute 绝对定位已包含框进行偏移，他已经不在标准流中，对后面的兄弟盒子定位没有影响。 fixed 固定定位，以浏览器窗口为基准定位，当浏览器滚动滑动条时，位置不改变。定位的值. .son{ position:relative; left:20px; top:20px; } .son1{ position:relative; right:20px; bottom:20px; } 效果演示代码 <html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
body{
margin:15px;
font-family:Arial;
font-size:12px;
}
.father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
}
.father div{
padding:10px;
margin:15px;
border:1px dotted #111111;
}
.son{
position:relative;
right:30px;
bottom:50px;
}
.son1{
position:relative;
left:30px;
top:30px;
}
</style></head>
<body>
<div class="father">
<div class="son">BOX1</div>
<div class="son1">BOX2</div>
</div>
</body>
</html> 得出结论使用相对定位的盒子会在其标准流的位置上，进行一定的偏移，使用相对定位的盒子，还在标准流中，对兄弟盒子，父盒子没有影响。 absolute定位：绝对定位以他最近的已经定位的祖先元素为基准，进行偏移。绝对定位之后，就从标准流中脱离，对其他盒子像是不存在的。更多交流请到提问网shenzhidao.com!