相对、绝对和固定定位的比较

2024-07-11 08:34:46

字体：大中小

来源：转载

供稿：网友

一、相对定位（relative）
首先，说一个文档流的概念，有时候也叫做文本流。“流”表示连续不断的意思，比如“流媒体”，这里的文档（文本）流指的是源程序里面的代码，也就是html里面的标签。
测试代码：

<html>
<head>
<title>position</title>
<style type=”text/css”>
#div1{
height:80px;
width:400px;
background:red;
}
#div2{
height:80px;
width:300px;
background:blue;
position:relative;
left:20px;
top:-20px;
}
#div3{
height:80px;
width:300px;
background:green;
}
</style>
</head>
<body>
<div id=”div1″>
</div>
<div id=”div2″></div>
<div id=”div3″></div>
</body>
</html>

当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不会被下面的DIV块挤占，而是空在那里；当偏移后向下或者向右的内容会被隐藏，而这一点区别于绝对定位，绝对定位会出现滚动条。但是向左或者向右的内容超出当前浏览器的视线，无论是相对还是觉得定位，超出的部分都会被隐藏。
二、绝对定位（absolute）
当一个DIV块的位置被定义为绝对定位的时候，也就意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替它的位置。如果上下左右的绝对偏移量都是零，那么它将漂浮在原来的位置上。否则就会以浏览器的上下左右四边为基准进行偏移。
测试代码：

<html>
<head>
<title>position</title>
<style type=”text/css”>
#div1{
height:880px;
width:400px;
background:red;
}
#div2{
height:80px;
width:300px;
background:blue;
position:absolute;
left:-80px;
bottom:-50px;
}
#div3{
height:880px;
width:300px;
background:green;
}
</style>
</head>
<body>
<div id=”div1″>
</div>
<div id=”div2″>
</div>
<div id=”div3″>
</div>
</body>
</html>