最近发现自己对于css的定位有点混乱,趁着周末有空赶紧补一下
首先,先写好原来的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style>
.father{
width: 100%;
height: 500px;
background-color: bisque;
}
.son1{
width: 50%;
height: 100px;
background-color: #00ff7f;
}
.son2{
width: 60%;
height: 100px;
background-color: #fff701;
}
.son3{
width: 70%;
height: 100px;
background-color: #0026ff;
}
.son4{
width: 80%;
height: 100px;
background-color: #08ffeb;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">son1</div>
<div class="son2">son2</div>
<div class="son3">son3</div>
<div class="son4">son4</div>
</div>
</body>
</html>
原来的布局长这样
.son1{
width: 50%;
height: 100px;
background-color: #00ff7f;
/* 相对定位 */
position: relative;
left: 50px;
top: 50px;
}
son1相对于自己的原位置,向左和向下偏移了
.son2{
width: 60%;
height: 100px;
background-color: #fff701;
/* 相对定位 */
position: relative;
left: 100px;
top: -100px;
}
son1相对于自己的原位置,向左和向上偏移了
.son3{
width: 70%;
height: 100px;
background-color: #0026ff;
/* 相对定位 */
position: relative;
left: 100px;
top: 400px;
}
总结:
在同一父元素下的同级子元素,如果都用的相对定位,那么他们是相对于自己的原来的位置进行的移动。