HTML相对定位和绝对定位详解

何为html相对定位和绝对定位?

css定位主要有四种，静态定位、相对定位、绝对定位和固定定位。其中静态定位这个是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性，其它三种定位可以使用以上几个属性。我们这里主要介绍绝对定位和相对定位。

相对定位:

可以这样来理解相对定位，何为相对?就是相对于自身的一种定位，随意改变移动他的位置并不会影响其他元素的位置，也就是相对于自身的一种定位。

我们来看一个实例:

定义三个普通div，红色蓝色灰色，宽都为200像素高都为100像素:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#test1{
width: 200px;
height: 100px;
background: red;

}

#test2{
width: 200px;
height: 100px;
background: blue;

}
#test3{
width: 200px;
height: 100px;
background: grey;

}

</style>
</head>
<body>
<div id="test1">中国最强</div>
<div id="test2">中国最强</div>
<div id="test3">中国最强</div>
</body>
</html>

效果图:

可以很清晰的看到3个普通div竖着铺在了一起，那么这个时候你来想有没有办法让红块向下移动30像素呢?

方法很简单我们只需要给他加一个margin值为30像素即可，我们来试一试:

margin: 30px 0px 0px 0px;

效果图:

好，我们可以看到红块确实被向下挤了30像素的距离，但是你会发现，红块向下挤了30像素，同时也影响了其他两个div也同时向下移动了30像素，那么你在想，有没有办法使这个红块向下移动30像素而不去影响其他两个div呢?这时就需要用到我们的相对定位啦。

设置相对定位:

position: relative;
top: 50px;

效果图:

现在我们就可以很清晰的看到，我们的红块向下移动了50像素，并且覆盖在蓝块的上方区域，我们的蓝快和灰块并没有发生移动，这就是相对定位。

绝对定位:

可以这样来理解绝对定位，首先我们打开一个网页浏览器会自动帮我们渲染一个网页让他显示在我们能看见的东西，而设置了绝对定位的元素我们可以先视它不存在，等其他元素全部渲染完之后再最后来渲染这个绝对定位，可以理解为它是被投射下来，它不会去影响其他元素的位置。

我们来看一个实例:

定义一个普通div，宽800像素，高600像素，背景颜色:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

div{
width: 800px;
height: 600px;
background: grey;
}

</style>
</head>
<body>
<div>


</div>
<div id="zhongguo">中国</div>
</body>
</html>

效果图:

随即在定义一个普通div，高为300像素宽为300像素，背景颜色为红色

#zhongguo{
height: 300px;
width: 300px;
background: red;
}

<div id="zhongguo">中国</div>

效果图:

可以很明显的看到我们的红块在灰块下方。

这时我们加上绝对定位属性设置它的右边距10像素上边距10像素再来看一看效果:

position: absolute;
top: 10px;
left: 10px;

可以很明显的发现我们的红块并没有受到灰块的影响，覆盖再灰块的上面了，这时就可以把它想象为这个红块是从空中投射下来的，浏览器是渲染完其他元素最后才来渲染它的，不妨我们加一个蓝色的div试一试。

再加上一个蓝色div设置为绝对定位，让大家更为直观的观察这里设置了top: 50px，left: 50px:

#lan{
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
background: blue;
}


<div id="lan">蓝色</div>

效果图:

可以发现我们定义的蓝块又被投影了下来，在红块之上。

源码实例下载:

http://cdn.aidezy.com/f.php?k=496ee

好了我们的相对定位和绝对定位基本上就是这样了，希望对大家有所帮助，希望转载的朋友能够留下原出处。