<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#L1{
background: red;
border: 1px dashed red;
}
#L2{
background: red;
border: 1px dashed red;
}
#L3{
background: red;
border: 1px dashed red;
}
</style>
</head>
<body>
<div id="father">
<div id="L1"> 第一行</div>
<div id="L2"> 第二行</div>
<div id="L3"> 第三行</div>
</div>
</body>
</html>
我们输入代码，浏览器打开
使其变成这样
相对定位
相对定位，相对于自己原来的位置进行位移
position
#L1{
background: red;
border: 1px dashed red;
position:relative;
top:-20px;
}
我们在#L1里面输入position:relative /相对定位 : 绝对定位/
浏览器打开一下
就会发现
第一行向上偏移了20px
不过有一点要注意
这串代码的意思是，距离原位置偏移20px
如果top:20px
我们输入的是这个的话，
第一行是出于下面，而不是上面
就会这个样子
结论
相对于原来的位置，进行指定的偏移，相对定位，仍在标准文档流中，原来的位置会被保留
top:-20px;
left:20px;
bottom:-20px;
right:20px
/*上、左、下、右*/
扫一扫
2539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
