absolute、relative与浮动float三者的区别
| 属性 | 是否脱离文档流 | 是否占位 | 是否影响周围元素在文档流中的位置 |
|---|---|---|---|
| relative | 否 | 是 | 否 |
| absolute | 是 | 否 | 否 |
| float | 是 | 否 | 是 |
relative相对定位
将定位元素不偏离正常文档流。
（1）relative元素不加position定位，其位置是在虚框位置。
（2）relative元素加了position:relative，相对于自身的定位，将根top/bottom/left/right，基于虚框（原来自身的位置）的margin左上外角定位的。
（3）虚框为relative元素占用了正常文档流的位置，所以正常元素到下面了。
image
<style>
* {
padding: 0;
margin: 0;
}
#sub1 {
height: 100px;
width: 100px;
position: relative;
top: 100px;
left: 100px;
background-color: red;
}
#sub2 {
height: 100px;
width: 100px;
background-color: green;
}
</style>
<body style="border:1px black solid">
<div id="sub1">relative元素</div>
<div id="sub2">正常元素</div>
</body>
absolute绝对定位
将定位元素偏离正常文档流，不占用正常文档流的位置。如下图中：
image
<style>
* {
padding: 0;
margin: 0;
}
#sub1 {
height: 100px;
width: 100px;
position: absolute;
/* margin: 10px;
border: 10px;
padding: 10px; */
top: 100px;
left: 100px;
background-color: red;
}
#sub2 {
height: 100px;
width: 100px;
/* position: relative;
top: 100px;
left: 100px; */
background-color: green;
}
</style>
<body style="border:1px black solid">
<div id="sub1">absolute元素</div>
<div id="sub2">正常元素</div>
</body>
-
absolute元素的父元素没有position定位，absolute元素相对于body定位
image
<style>
* {
padding: 0;
margin: 0;
}
#parent {
height: 100px;
width: 100px;
background-color: yellow;
/* position: absolute; */
margin: 100px;
padding: 100px;
}
#child {
height: 100px;
width: 100px;
position: absolute;
/* margin: 10px;
border: 10px;
padding: 10px; */
top: 100px;
left: 100px;
background-color: red;
}
</style>
<body style="border:1px black solid">
<div id="parent">父元素
<div id="child">absolute元素</div>
</div>
</body>
-
absolute元素的父元素有position定位（absolute或relative），absolute元素相对于父元素的padding左上外角进行定位
image
<style>
* {
padding: 0;
margin: 0;
}
#parent {
height: 100px;
width: 100px;
background-color: yellow;
position: absolute;
margin: 100px;
padding: 100px;
}
#child {
height: 100px;
width: 100px;
position: absolute;/*或者positi:relative*/
/* margin: 10px;
border: 10px;
padding: 10px; */
top: 100px;
left: 100px;
background-color: red;
}
</style>
<body style="border:1px black solid">
<div id="parent">父元素
<div id="child">absolute元素</div>
</div>
</body>
fixed固定定位
脱离文档流，不占用正常文档流，相对于body定位
网友评论