- 绝对定位(absolute) : 元素会脱离文档流,如果设置偏移量,会影响其他元素的位置定位
- 相对定位(relative) : 相对于原来位置移动,元素设置此属性之后仍然处在文档流中,不影响其他元素的布局
1 demo
1.1 absolute
<div class="abs">绝对定位</div>
<div></div>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
.abs {
position: absolute;
left: 30px;
top: 30px;
border: 1px solid green;
}
</style>
1.2 relative
<div class="abs">相对定位</div>
<div></div>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
}
.abs {
position: relative;
left: 30px;
top: 30px;
border: 1px solid green;
}
</style>
1.3 absolute + relative
<div class="box">
<div class="new">新课</div>
</div>
<style>
.box {
width: 270px;
height: 268px;
position: relative;
border-radius: 4px;
background-image: url("https://img4.mukewang.com/szimg/5ecc7cb709a1053112000676-360-202.png");
background-repeat: no-repeat;
background-size: 100%;
}
.box .new {
position: absolute;
border: 2px solid #FFFFFF;
border-radius: 12px;
top: 8px;
left: -8px;
font-family: 'dincondm', serif;
font-size: 12px;
color: #FFFFFF;
line-height: 20px;
padding: 0 8px;
background-color: #FFAA00;
background-image: linear-gradient(90deg, #ffaa00 17%, #f76b1c 100%);
}
</style>
2 案例分析
https://www.runoob.com/w3cnote/css-position-static-relative-absolute-fixed.html