定位
常见的定位有四种
1.static 定位(默认值)
2.relative相对定位
3.absolute 绝对定位
4.fixetd 困定定位
相对定位:
这里我们看出,所谓相对定位是相对于以前的位置而从新定位.虽然它脱离的标准流,但是它的空间,不能被占用,
代码:
.div1{
width:70px;
height:30px;
background:green;
float:left;
margin-left:5px;
}
#spe{
position:relative; 相对定位
left:40px;
top:100px;
}
绝对定位:
代码:
Css:
.div1{
width:70px;
height:30px;
background:green;
float:left;
margin-left:5px;
}
#spe{
position:absolute;
left:40px;/*feft为正,则向右移动*/
top:100px;/*top为正,则向下移动*/
}
Html:
<html>
<head>
<link rel=”stylesheet” href=”index.css” type=”text/css”/>
</head>
<body>
<div class=”div1″>内容1</div>
<div id=”spe” class=”div1″>内容2</div>
</div>
<div class=”div1″>内容3</div>
<div class=”div1″>内容4</div>
</body>
</html>
从上图看.所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位.如果没有父元素(或者有父元素,但是父元素没有脱离标准流),刚相对body左上角定位.
Fixed定位:
所谓fixed定位就是不管怎样,总是以视窗的左上角定位
注意:left top 属性对static定位是没有效果的.static 是靠margin-left ,margin-right来移动的.