定位
常见的定位有四种
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来移动的.
|ali16|小微，图都坏了，没法看
@叶雨梧桐：没有吧,我去别的电脑也是可以的呀?
@小微语：不知道哦，具体的我截图发你邮箱了|ali11|
@叶雨梧桐：我看看去,.
@叶雨梧桐：那个邮箱?好像没收到!
额，你《关于博主》里的邮箱地址不会错了吧|ali2| 我直接复制的，163还是126啊|ali16|
@叶雨梧桐：嗯 ,嗯 ,看见了,可能是有点慢吧,我没用那个七牛.用了微博相册.如果不好,我会换的.嘿.嘿.谢谢!
@小微语：咱俩的聊天 都被百度人收录了图发你邮箱了~
@小微语：嗯嗯 ，看到了|ali4|