/*相对定位*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>/*样式*/
*{/*通用*/
margin: 0;/*外间距*/
padding: 0;/*内间距*/
}/*行块间距*/
div{
width: 100px;/*宽度*/
height: 100px;/*高度*/
border: 1px solid red;
/*框线 线宽 颜色 红色* /
}
div:first-child{
position: relative;/* 相对定位 */
top: 50px;
}
</style>
</head>
<body>
<div></div>/*向下移动50px*/
<div></div>/*原位不动*/
</body>
</html>
绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
}
div:first-child{
position: absolute; /* 绝对定位 */
top: 100px;
border: 1px solid #0000FF;
}
</style>
</head>
<body>
<div></div>/*往下移100px*/
<div></div>/*往上移100px*/
/*第一个div往下移，位置空出来，第二个div往上移填充空出来的位置*/
</body>
</html>
