绝对定位absolute

absolute包裹性
float是个带有方位的display:inline-block属性，absolute也是个inline-block化属性。

在一个空div中添加一张图片，可以看到图片位居div左侧，而此时div的长度为100%

Paste_Image.png

现在我们给div添加position:absolute; padding:5px; 发现div的宽度变窄了并且包裹在图片四周，这时div的高和宽是自适应，会随着图片的大小变化而变化，absolute具有包裹性，同样的float 也具有包裹性
当把position：absolute；修改为float：left；发现效果和absolute是一样的
absolute与float的包裹性等同于inline-block属性，不同的是float具有方向性，而inline-block是水平排列

Paste_Image.png

        <style type="text/css">
              .abs{
                    background: #ADADAD;
                  padding: 5px;
                    position: absolute;
              }
        </style>

absolute致使父元素的高度塌陷
绝对定位的元素脱离了文档流（不占据之前的空间），而浮动元素依旧在文档流中浮动（依然占据之前空间）

当我们给空div添加一张图片，只给div设置padding：20px；然后给图片设置position：absolute；会发现div的高度只有padding这20px，并没有根据图片的高度自适应，absolute使图片脱离文档流，使它在div中不占据空间，所以父元素div的高度发生了塌陷，同样的我试了下将图片的position：absolute；属性设置为float：left；发现具有同样的特性致使父元素div的高度塌陷。

Paste_Image.png

对于float导致的父元素div塌陷，我们根据图片大小给父元素div设置了一个高度大小 从而再次使得div包裹图片

Paste_Image.png

但是存在缺点，就是这个高度是固定的，如果我们想添加多个图片，多的使得图片产生自动换行显示，那么这个高度又需要修改，这里有一个方法就是让div高度自适应它们的高度，删除原先的父元素div固定height，给父类元素div设置属性overflow：hidden；

Paste_Image.png

可以看到div自动适应高度

Paste_Image.png

        <style type="text/css">
              .abs{
                    background: #ADADAD;
                  padding: 20px;
                    overflow: hidden;
              }
              div img{
                    float: left;
              }
        </style>

absolute跟随性
给元素设置position：absolute；是元素具有跟随性，例如在同一个div中，存放三张图片，都不设置任何属性的时候，他们水平排列着。

Paste_Image.png

给第二张图片设置一个绝对定位（position：absolute；）属性可以发现，第三张图片紧靠在第一张图片后面，而第二张图片漂浮到了第三张图片上面（第二张图片脱离了文档流，并且不占空间），并且还是紧靠在第一张图片后面，这就是绝对定位的跟随性

Paste_Image.png

       <style type="text/css">

            .qq{
                 width: 200px;
                 background: #adadad;
            }
            .close{
                 width: 50px;
                 position: absolute;
            }
            .wx{
                 width: 200px;
                 background: #ADADAD;
            }
       </style>

absolute的无依赖性
absolute的无依赖性，就是不依赖relative的限制来进行定位 首先先演示下父类元素设置relative下的定位，首先要给父类元素设置relative，子元素使用absolute 配合left，top进行定位，这里的left和top根据父类元素进行定位

Paste_Image.png

            .box{
                 position: relative;
            }
            .qq{
                 width: 300px;
                 background: #adadad;
            }
            .close{
                 width: 50px;
                 position: absolute;
                 left: 250px;
                 top: 0;
            }

这种方法给右上角图标进行定位的缺点是要有relative来限制absolute，如果不给absolute的父元素添加relative，那么absolute的元素就会根据body进行定位，当图片改变大小的时候，右上角图片就需要重新定位。比如当把图片变小，右上角的图片就显示在了偏右的位置，小图片依旧保持在left：250px；的位置，这就需要重新给小图片进行定位。

Paste_Image.png

如果使用margin配合absolute进行小图片的定位，就可以脱离父级元素relative的限制，实现无依赖定位，同样是上面的例子，现在取消父级元素relative的属性，使用margin进行定位

Paste_Image.png

        .qq{
                 width: 200px;
                 background: #adadad;

            }
            .close{
                 width: 50px;
                 position: absolute;
                 margin-left:-50px ;
                 margin-top: 0;

            }

使用margin和absolute配合进行定位，无论图片怎么改变大小，小图标始终定位在企鹅的右上角，不会偏离位置。

Paste_Image.png

absolute的容器拉伸特性
absolute具有拉伸容器大小的特性，例如要实现一个距右边距200px的容器，可以设置容器属性position：absolute；left：0；top：0；right：200px；
这里容器没有设置高度，就使用一张图片撑开它

Paste_Image.png

absolute不但可以拉伸容器，也可以拉伸内部元素，如果内部元素设置固定的长高，绝对定位是不能拉伸它的，当内部元素设置为百分比时，内部元素会随着外部容器的拉伸而拉伸。

            .box{
                 position: absolute;
                 left: 0;
                 top: 0;
                 right: 200px;
                 background: aquamarine;
            }
            .pic{
                 width: 30%; /* 图片设置百分比*/
            }

Paste_Image.png