前端开发 --相对定位和绝对定位理解
2020-05-08 本文已影响0人
码农冰冰
一直很模糊绝对定位和相对定位,今天写个demo观察变化理解下：
绝对定位
基于绝对定位的元素不会占据空间，脱离文档流。绝对定位会相对这个屏幕。
相对定位
它以自身原先的位置为参照物向上下左右移动，但是当它移动之后，原有的位置空间存在。
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<!-- <div class="second">
</div> -->
</body>
<style>
.box {
width: 1100px;
height: 900px;
background-color: black;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
position: relative;
left: 100px;
top: 10px;
}
.box2 {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
/* left: 100px;
bottom: 50px; */
left: 10px;
top: -10px;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
/* position: relative; */
left: 10px;
bottom: 20px;
}
.box4 {
width: 100px;
height: 100px;
background-color: blue;
/* position: relative; */
top: 150px;
left: 100px;
}
</style>
[图片上传失败...(image-8ee78c-1588920237217)]
)
