为了账号安全,请及时绑定邮箱和手机立即绑定

为什么将positioning由relative改为absolute,span标签的文字就往上移动呢?我还是不怎么理解什么时候用absolute,什么时候用rel

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>absolute样式</title>

<style type="text/css">

    #on{

   

width: 600px;

height: 600px;

border: 2px solid red;

position: absolute;

left: 400px;

top:10px;

}


.div2{

width: 300px;

height: 300px;

        position: absolute;

left: 60px;

border: 2px solid red;

}

</style>

</head>

<body>

<body>


<div id="on">


         <div class="div2"></div><span>偏移前的位置还保留不动,覆盖不了前面的div没有偏移前的位置</span>


    </div>

</body>

</body>

</html>


正在回答

3 回答

relative是相对定位  相对的是自己以前的位置,相对于自己以前位置的左上角为原点开始移动,left是现在位置距自己以前位置的左边的距离(有点拗口,语言组织能力太差将就看吧)。。  top是现在位置距自己以前位置的上边的距离,记住是以以前位置左上角为原点的哦。

absolute是绝对定位  是以父级左上角为原点开始移动,没有父级就是<body>浏览器页面了,left是距父级左边的距离  top是距父级上边的距离,记住是以父级左上角为原点的哦。

题主所说的会往上移动也是这个道理,相对移动是相对span标签原来的位置,原来的位置在div的下面本身原点就很低,而绝对移动是相对于父级标签的,题主问题中的父级标签是body,就是浏览器页面,绝对移动是以浏览器页面左上角来移动的,原点高,所以移动完后也高。


3 回复 有任何疑惑可以回复我~
#1

qq_小柯_1 提问者

恩,更深的理解啦
2015-11-26 回复 有任何疑惑可以回复我~

因为绝对浮动  是断绝关系的孩子  再也不会回来的了  所以家里就没有给他留位置了

1 回复 有任何疑惑可以回复我~
#1

qq_小柯_1 提问者

恩恩,精辟的解释
2015-11-07 回复 有任何疑惑可以回复我~

relative  本身不会对页面造成什么影响,他是只给absolute作参考,absolute的位置会相对于离他最近的一个有relative的标签

 

1 回复 有任何疑惑可以回复我~
#1

qq_小柯_1 提问者

恩恩,领悟了一点,O(∩_∩)O~~
2015-11-06 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么将positioning由relative改为absolute,span标签的文字就往上移动呢?我还是不怎么理解什么时候用absolute,什么时候用rel

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信