position:absolute和position:relative是两个html中常用到的样式，前者是绝对定位，定位基于最近的一个已经定位的祖先元素，如果没有找到，就基于根元素<html>进行定位，后者是相对定位，基于自身的位置进行偏移。
下面用几个简单的例子看看。
定义4个div。
<style>
div {
height:100px;
border:1px solid #999;
}
#div1{
background-color:yellow;
}
#div2{
background-color:orange;
}
#div3 {
background-color:skyblue;
}
#div4 {
background-color:lightgray;
}
</style>
<body>
<div id="div1">第一个div</div>
<div id="div2">第二个div</div>
<div id="div3">第三个div</div>
<div id="div4">第四个div</div>
</body>
把第3个div设置成absolute,但是不设置left和top值。可以发现:
1.div3宽度由元素中的内容决定了
2.div4上移到第三个div的位置，被第3个div所覆盖了
3.div3在设置绝对定位以后，并没有基于<html>根元素偏移。
总结下我的个人理解:
1.设置了absolute的元素宽度是由内容决定的，relative元素的宽度的则是取决于父元素的宽度
2.如果设置了absolute属性，元素会让出原来的位置，处于另外一个层级。
3.在没有设置left,top等值的时候，虽然div已经有了absolute元素的特性，但是还会保持在之前的位置，尽管已经处在不同的层级，这时候如果我们设置left和top都为0，就会基于最近的定位了的父元素进行偏移，在这个例子中，div3就会偏移到左上角的位置。
#div3 {
background-color:skyblue;
position:absolute;
}
接下来在div3中加入一个div5
1 <style>
2 div {
3 height:100px;
4 width:200px;
5 border:1px solid #999;
6 }
7 #div1{
8 background-color:yellow;
9 }
10 #div2{
11 background-color:orange;
12 }
13 #div3 {
14 background-color:skyblue;
15 position:absolute;
16 }
17 #div4 {
18 background-color:lightgray;
19 }
20 #div5 {
21 width:100px;
22 height:50px;
23 background-color:red;
24
25 }
26
27 </style>
28 <body>
29 <div id="div1">第一个div</div>
30 <div id="div2">第二个div</div>
31 <div id="div3">
32 第三个div
33 <div id="div5">
34 第五个div
35 </div>
36 </div>
37 <div id="div4">第四个div</div>
38 </body>
div4藏到了div3下面。
给div5设置absolute属性，添加left:50px,top:0px;
如果设置relative,top:0px,left:50px;
#div5 {
width:100px;
height:50px;
background-color:red;
position:relative;
left:50px;
top:0px;
}
以上就是我对relative和absolute的一些简单总结了。
原文地址：https://www.cnblogs.com/blogforvi/p/11595858.html
时间： 2024-08-14 04:53:02