关于相对定位和绝对定位的问题

关于相对定位和绝对定位的问题

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    /*完善下列代码*/

    .per{

     width: 300px;

     height: 300px;

     background: red;

     margin-left:200px;

     margin-top: 200px;

     position:absolute;

     

   

   }


   .son{

     width: 100px;

     height: 100px;

     background: blue;

     position:absolute;

     left:100px;

     bottom:100px;

     

   }

  </style>

</head>

<body>

  <div class="per">

    <div class="son"></div>

  </div>

</body>

</html>

老师请问我把父类元素和子类元素都设置成的绝对定位也能够达到效果啊。你们说的相对定位相对于自己定位是什么意思啊。相对不应该有对比参照物吗

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕小班 2019-10-07 18:08:06

同学你好,在一个html文件中,它默认会按照从上到下,从左到右的顺序来加载内容,比如:

http://img1.sycdn.imooc.com//climg/5d9b0d570948878510720595.jpg

此时这些内容的位置就是它根据页面的加载顺序完成的,这就是这些元素的原始位置。

    2、此时添加相对定位,就是相对于这个原始位置的定位。

    3、如上如示,我们为img添加相对定位,

http://img1.sycdn.imooc.com//climg/5d9b0e130963d00406060821.jpg

如上所示,就是相对于原始位置距离顶部top距离30px,距离左边left距离35px。

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快~

好帮手慕小班 2019-10-07 10:56:23

同学你好,1、同学的代码这样写也是可以的,但是这个练习的目的是要同学加深对相对定位和绝对定位的理解呢~

    2、相对定位:会占用该元素在文档中初始的页面空间,通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置,然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

http://img1.sycdn.imooc.com//climg/5d9aa9bb0959bac813660190.jpg

    所以我们会说相对定位会相对于自己以前的位置定位。

    3、绝对定位:作用将元素从文档流中拖出来,将不占用原来元素的空间,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查,直到相对于body元素,即相对于浏览器窗口。

同学可以先看一下后面的相对与绝对定位对比课程,然后再回过头来再做这个练习就会有不一样的体会呐。

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快~

  • 提问者 慕运维lh #1
    我看了后面的课程还是有点想不通相对于自己以前的定位怎么定位?那我怎么知道以前的位置在哪呢?比如说我想将一个图片定位在页面中的一个位置,那我怎么用相对定位呢??
    2019-10-07 11:21:48
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师