为什么absolute定位始终以浏览器为基准,而不是以父元素为基准

只有将父元素的postion设置为relative,那么absolute定位才以父元素为基准进行偏移。

 

拿例子说明最好
<body>
<div id="a">
  <div id="b"></div>
</div>
</body>

#a{width:500px;height:500px;background:#ccc;}
#b{width:100px;height:100px;background:#f00;}

首先我们设置#a{position:relative;left:30px;top:50px;}
此时浏览效果为,#a距离浏览器 上边缘50px,左边缘30px

接着我们设置#b{position:absolute;left:20px;top:10px;}
此时浏览效果为#b是距离#a内部上边缘10px,左边缘10px,而不是相对于浏览器

一句话,如果要使用absolute,就必须在这个absolute的外面那个层设置relative
如刚刚这个例子的#a和#b这样

而relative不是就是相对于浏览器的边缘的,而是相对于包围他的那个层,不理解,咱继续
如<body>
    <div id="out">
      <div id="a"><div id="b"></div></div>
    </div>
  </body>
假如我们的#out此时在距离浏览器上方100px,距离浏览器左边300px
那么我们设置#a{position:relative;left:10px;top:20px;}
此时浏览器显示#a距离#out上边缘20px,左边缘10px

好了,差不多就这样了,自己必须写一下才能知道,看看肯定不行


发表评论

邮箱地址不会被公开。