div+css定位笔记

定位

常见的定位有四种

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来移动的.

2013
10/25
分类：
日常信件
标签：
9 条评论
  • 通告已关闭
  • 评论 (9)

  1. |ali16|小微，图都坏了，没法看

  2. 额，你《关于博主》里的邮箱地址不会错了吧|ali2| 我直接复制的，163还是126啊|ali16|

    • @叶雨梧桐：嗯 ,嗯 ,看见了,可能是有点慢吧,我没用那个七牛.用了微博相册.如果不好,我会换的.嘿.嘿.谢谢!