任务要求是相对于以前位置左上角向右移动100px，向下移动50px，为何代码不是：right:100px;bottom:50px;-慕课网

任务要求是相对于以前位置左上角向右移动100px，向下移动50px，为何代码不是：right:100px;bottom:50px;

来源：13-7 相对于自己的位置-层模型之相对定位

慕姐3102452

2016-03-09 16:04

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>relative样式</title>
<style type="text/css">
#div1{
    width:200px;
    height:200px;
border:2px red solid;
    position:relative;
    left:100px;
    top:50px;




}

</style>
</head>
<body>
<div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移的位置</span>
</body>
</html>

写回答关注

3回答

pengpenggo

2016-03-09 18:49:58

理解成距离参照物基准位置

0 0
CL_BB

2016-03-09 16:17:45

向右移动，是以左边为基准，向下移动，是以最上方为基准，left、top指的是基准位置，不是移动的方向

1 3

慕姐3102...

明白了，非常感谢

2016-03-09 16:30:24

共 1 条回复 >
慕工程3266632

2016-03-09 16:16:02

确定life,right,top,bottom是要和你移动之前的位置比较的，
之前位置在左上角，向右移动100px不就是相对之前位置距离100px,即left:100px,
同理的top:50px；
看图应该比较明白；

2 1

慕工程326... 回复慕姐3102...

参照物是移动前的块的位置，本题参照物在左上角

2016-03-09 16:29:16

共 2 条回复 >