5回答

• 

  风中之羽

  2016-09-09 21:41:42

  已采纳

   相对定位是相对于该块元素在文档流中的位置的，比如，我们可以使用相对定位把div2放到div1的右侧，CSS代码如下： 
  #div1 {
    border: 1px solid #000099;
    height: 60px;
    width: 200px;
    margin:2px;
  }
  
  #div2 {
    border: 1px solid #000099;
    height: 60px;
    width: 200px;
    margin:2px;
    position: relative;
    top: -64px;
    left: 204px;
  }
  
  #div3 {
    border: 1px solid #000099;
    height: 60px;
    width: 200px;
    margin:2px;
  }
  
  下面是效果：
  

  
    可以看到一个有趣的现象，那就是虽然我们把div2移走了，但是div1和div3中间还是有一个空间，说明相对定位的元素是会占据文档流空间的，这里的div2就是典型的“站着茅坑不拉屎”。
  

  使用绝对定位也是可以把div2摆到div1的右边的，而且绝对定位是不会占据文档流空间的，如下图，div1和div3之间没有空白：
  
  
  div2的CSS代码： 
  #div2 {
    border: 1px solid #000099;
    height: 60px;
    width: 200px;
    margin:2px;
    position: absolute;
    top: 15px;
    left: 214px;
  }

  你自己可以根据这个编写代码，就可以看出他们的效果。总的来说，绝对定位可以把内容显示在页面的任何位置。但是相对位置却做不到这一点。

  1 1

  慕粉3571...

  如果这样的话，为什么还要用相对位置呢？感觉用绝对定位更好？

  2016-09-20 22:30:58

  共 1 条回复 >

• 

  慕粉3917843

  2016-09-27 22:17:40

  <!-- absolute;绝对定位:  父元素没加相对定位的时候相对于浏览器(或body)的位置移动；父元素加了相对定位，相对于自己原来的位置移动-->

  relative的作用是让父元素可以定住下面子元素的absolute。否则父元素下面的子元素使用absolute的时候会跳出父元素，因为每次absolute都是根据浏览器左上角的位置移动的 当父元素加了position:relative;的时候，子元素使用absolute 就不会跳出来

  0 1
• 

  慕粉3917843

  2016-09-27 22:12:21

  <!-- absolute;绝对定位:  父元素没加相对定位的时候相对于浏览器(或body)的位置移动；父元素加了相对定位，相对于自己原来的位置移动-->

  0 0
• 

  地球一书生

  2016-09-09 21:29:24

  你感觉最合适的情境下，他只是你设计的一个工具，同一个问题，情况不一样，用的东西也不一样

  0 0
• 

  nxycdl

  2016-09-09 21:27:27

  同问。

  1 0

  慕粉3917...

  <!-- absolute;绝对定位: 父元素没加相对定位的时候相对于浏览器(或body)的位置移动；父元素加了相对定位，相对于自己原来的位置移动-->

  2016-09-27 22:12:43

  共 1 条回复 >