一、定位的种类
1.static 静态定位(默认的定位方式)
2.relative 相对定位
3.absolute. 绝对定位
4.fixed 固定定位
相对定位:相对于原来的地方定位,图中的红点处,虽然离开了原来的地方,但是他的位置不能被别的地方占用
<html>
<head>
<title> New Document </title>
<style>
.div1{
width:70px;
height:30px;
background:silver;
float:left;
margin-left:5px;
}
#spe{
position:relative;
left:40px;
top:100px;
}
</style>
</head>
<body>
<div class="div1">内容1</div>
<div class="div1" id="spe" >内容2</div>
<div class="div1">内容3</div>
<div class="div1">内容4</div>
</body>
</html>
绝对定位:
<html>
<head>
<title> New Document </title>
<style>
.div1{
width:70px;
height:30px;
background:silver;
float:left;
margin-left:5px;
}
#spe{
position:absolute;
left:40px;
top:100px;
}
</style>
</head>
<body>
<div class="div1">内容1</div>
<div class="div1" id="spe" >内容2</div>
<div class="div1">内容3</div>
<div class="div1">内容4</div>
</body>
</html>
所谓绝对定位:对该元素最近的脱离了标准流的元素,如果没有父元素,则相对body左上角定位。
案例2:
<html>
<head>
<title> New Document </title>
<style>
.div1{
width:70px;
height:30px;
background:silver;
float:left;
margin-left:5px;
}
.div2{
position:relative;
left:100px;
top:100px;
width:200px;
height:150px;
background:pink;
float:left;
}
#spe{
position:absolute;
left:40px;
top:100px;
}
</style>
</head>
<body>
<div class="div1">内容1</div>
<div class="div1">内容3</div>
<div class="div1">内容4</div>
<div class="div2"><div class="div1" id="spe" >内容2</div></div>
</body>
</html>
fixed定位:
以视窗的左上角定位。
left,top对static 不起作用。
margin-left 和margin-top对static起作用。
z-index 层叠顺序,值越小,越在下面。