深入理解CSS之absolute

1. absolute 的包裹性和破坏性

1.1 包裹性

假设有一段html:


        ![](http://upload-images.jianshu.io/upload_images/2793567-2ae6ad44e093989e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

css 为：

.box{
    padding: 10px;
    background-color: #f0f0f0;
 }

此时结果为：

此时box没有定位

当给 box 添加绝对定位的 css:

.box{
      position:absolute;
}

结果为：

box 绝对定位

1.2 破坏性

1. 还是子元素和父元素均未定义时的结果：

此时box 和 img 没有定位

2. 给 img 元素设置绝对定位，可以看出绝对定位具有破坏性。

img {
      position:absolute;
}

父容器塌陷了

2. 绝对定位的跟随性，单独使用功能更强大

通常使用绝对定位时，是把绝对定位和相对定位结合使用，让父元素使用相对定位，子元素相对于父元素绝对定位。但是，绝对定位单独使用有更强大的功能。

2.1 独立的 absolue 可以摆脱 overflow 的限制，无论是滚动还是隐藏

如下面一段代码：



    
        testContanttestingtesting
        ![](http://upload-images.jianshu.io/upload_images/2793567-2ae6ad44e093989e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](http://upload-images.jianshu.io/upload_images/2793567-2ae6ad44e093989e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](http://upload-images.jianshu.io/upload_images/2793567-2ae6ad44e093989e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

父容器设置 overflow: scroll; 观察 class = 'test' 的情况：

正常情况下是这样的

给测试 div 添加绝对定位。它便脱离文档流，不受父容器 overflow 的影响：

无论父容器 hidden 还是 scroll，测试div就在那，不倚不正

2.2 去浮动：absolute 和 float 同时出现时，absolute 起作用。

2.3 跟随性：设置绝对定位的元素，会跟随它之前的元素。

比如这个元素是 display:block;设置绝对定位之后，它仍以 display:block 的形式跟随在前一个元素后面，不过是脱离文档流的。同样，如果这个元素是 display: inline-block, 设置绝对定位之后，同样以它原来的形式跟在前一个元素后面。（在 Chrome 浏览器中，一个元素一旦设置了绝对定位，再修改它的 display 不起作用。）

如下代码：




    
    Document
    


    box1
    box2
    box3

结果为：

没有定位时的结果

然后在 .box2 的 div 上做文章。

1. 给 box2 设置绝对定位

box2 脱离文档流，因为原来是 inline-block，仍以 inline-block 跟随在前一个元素后面

2. 给box2 设置绝对定位和 `display:block`

首先设置 display:block:

box2 未设置绝对定位时

然后设置绝对定位：

box2 设置绝对定位

3. 绝对定位下的元素，left：0，right：0，同时存在。

.box{
  position: absolute;
  width: 100px;
  height: 100px;
  background: #f0f0f0;
  left: 0;
  right: 0;
}

    this is abso

位于浏览器左上角

** 如果给上述box元素添加 margin:auto，元素会居中。就是因为有 left:0; right:0.**

4.没有宽度和高度声明实现的全屏自适应效果

// 方法一
 .box {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
}

// 方法二
html,body{
  height:100%;
}
.box{
  position:absolue;
  width:100%;
  height:100%;
  left:0;
  top:0;
}