Untitled

# 实现父子DIV右边重合

> relative与absolute的分析:
>
> `absolute`是根据具有`absolute`/`relative`属性值的父元素进行定位，若所有父元素均无这两个属性值，那么讲根据窗口定位。**该属性会使得元素脱离文档流。**
>
> `relative`是根据自身元素在文档流中原本位置进行定位。**该属性不会使元素脱离文档流。**

直接上代码

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <style>
    .wrapper  {
      position: absolute;
      background: blue;
      width: 500px;
      height: 300px;
    }
    .box {
      position: absolute;
      right: 0;
      background: seagreen;
      width: 200px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="box"></div>
  </div>
</body>
</html>
```

如果将`.box`的`position`改为`relative`可不可以呢？

可以，但需要同时将`.box`的`right`改成`-300px`。