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

div+css定位笔记》有9个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注