position:absolute 跟 float 是兄弟关系，兼具“块状化”“包裹性”“破坏性”，不少布局可以相互替代，absolute 跟 float 同时存在时，float 属性是无任何效果的。

absolute 的包含块：

包含块规则：

  1. 根元素（很多场景下可以看成是<html>）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
  2. 对于其他元素，如果该元素的position是relative或者static，则“包含块”由其最近的块容器祖先盒的content box 边界组成。
  3. 如果元素 position:fixed,则“包含块”是“初试包含块”。
  4. 如果元素position:absolute，则“包含块”由最近的position不为static的祖先元素建立，具体方法如下：
  • 如果祖先元素是纯inline元素，则规则略复杂：
    * 假设给内联元素的前后各生成一个宽度为0的内联盒子，则这两个内联盒子的padding box 外面的外围盒就是内联元素的“包含块”；
    * 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是css2.1规范没有明确定义，浏览器自行发挥
  • 否则，“包含块”由该祖先的padding box 边界形成。

absolute绝对定位元素的“包含块”有以下3个明显差别：

  1. 内联元素也可以作为“包含块”所在元素；
  2. “包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素。
  3. 边届是padding box 而不是 content box

具有相对特性的无依赖absolute绝对定位


absolute是非常独立的css属性值，其样式和行为表现不依赖其他任何css属性就可以完成。


 <img src="top1.png" class="top1"><img src="cat19.jpg" >
  <style>
    .top1{
      position: absolute;
    }
  </style>

<h4 class="nav-list">
  <a href class="nav-a">
   热门导航<i class="icon-hot"></i>
  </a>
</h4>

<style>
  .nav-a{
    display:block;
    line-height: 20px;
    padding: 20px;
    color: #bbb;
    text-decoration: none;
  }
  .icon-hot{
    position: absolute;
    width: 28px;
    height: 11px;
    margin:-6px 0 0 2px;
    background: url('hot.gif');
  }
</style>

元素 position:absolute 后的display 计算值都是块状的，但是其定位的位置和没有设置position：absolute时候的位置相关。


内联控制元素对齐的text-align属性可以影响到可以让元素块状化的absolute的位置

<p><img src="1.jpg"></p>
p{
	text-align; center;
}
img {
	position: absolute;
}

原理如下：

  1. 由于内联水平的标签（例如<p>）中存在一个宽度为0，看不见摸不着的“幽灵空白节点”，也是内联水平，于是受text-align:center影响而水平居中显示。
  2. <img> 设置了 position:absolute,表示为“无依赖绝对定位”，因此在“幽灵空白节点”后面定位显示；同时由于图片不占据空间，这里的 "幽灵空白节点"当仁不让，正好在<p>元素水平中心位置显示，于是我们就看到了图片从<p>元素水平中间位置显示的效果。

此时我们只需要 margin-left一半图片宽度负值大小，就可以实现图片的水平居中效果了，与父元素position:relative然后定位元素设置left:50% 的方法相比，其优势在于不需要改变父元素的定位属性，避免可能不希望出现的层级问题。


利用text-align控制absolute元素的定位最适合的使用场景是主窗体右侧的"返回值"以及"反馈"等小布局的实现。

<div class="constr">
      <div class = "data">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim eligendi magni suscipit cumque placeat ratione dolorem exercitationem dolor, ab quasi et fugiat maxime! Dolor quos nisi sequi molestiae aut consequatur?
        Nisi, omnis provident molestiae rem explicabo obcaecati magni eligendi deleniti unde velit quidem, expedita porro nihil est. Quam blanditiis eaque quia deserunt. Quam, culpa amet enim a totam voluptatibus at.
      
      </div>
      <div class="alignright">
        <span class="follow">
          <a href="#"><img src="cssworld-13.png"></a>
        </span>
      </div>
    </div>

    <style>

      .constr{
        width: 70%;
        margin: auto;
        background-color: #f0f0f0;
      }
      .alignright{
        height: 0;
        text-align: right;
        overflow: hidden;
      }
			
      .alignright:before{
        content: '\2002';
        /* 一种空格 ,为了兼容Edge(移动端开发时，其实没有：before，靠空白幽灵节点也可以)*/
      }
      .follow{
        position: fixed;
        bottom: 100px;
        z-index: 1;
      }
      .follow > a > img{
        display: block;
        margin: 10px;
      }
      .data{
        overflow: hidden;
        position: relative;
        line-height: 100;
      }
    </style>

absolute与overflow

如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行裁剪。