张鑫旭慕课之——深入理解absolute（上）

1.absolute和float

• 具有相同的特性表现：破坏性（造成外层塌陷）与包裹性（包裹内部元素）

2.absolute与relative

• relative和absolute是分离的，是对立的,absolute越独立，越强大。
• 独立的absolute可以摆脱overflow的限制，无论是滚动的还是隐藏的。

3.无依赖的absolute定位

定义: 不依赖relative,单独使用absolute,而且不使用left top来定位,就只用position：absolute；

• position：absolute的表现：

  1.脱离文档流；

  2.去浮动：绝对定位实现的时候，浮动是无效的；比如说：图片浮动后绝对定位和直接绝对定位的位置是一样的；

  3.位置跟随：原先是block水平，那absolute后依旧是换行显示的，原先是inline或者inline-block，那么还是在原位置；特例：在IE7浏览器下，任何元素绝对定位都是inline-block化的；

  4.超越overflow：绝对定位后，页面滑动不受影响；

示例1：图标图片来覆盖，无依赖！

1. 不依赖父元素的position:relative来定位，代码更干净，自适应更好。

2. html的顺序很重要， 只设置absolute之后，有个非常大的特性“跟随性”，当它是普通元素时，呆在什么位置，绝对定位后，还呆在什么位置。

3. 使用<!– –>注释的形式来消除html标签之间的空格；

示例2 ：下拉框定位最佳实践

在HTML中将ul放在input前面，再利用absolute位置跟随特性，宽和高脱离了文档流不占空间特性，再配合margin来实现。

实现效果如图：

代码如下：

<div class="course-sidebar-search">
        <ul id="result" class="course-sidebar-result">
            <li><a href="http://www.imooc.com/view/121">分享：CSS深入理解之float浮动</a></li>
                <li><a href="http://www.imooc.com/view/118">案例：CSS圆角进化论</a></li>
                <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧图应用</a></li>
                <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
                <li><a href="http://www.imooc.com/view/57">案例：如何用CSS进行网页布局</a></li>
            </ul>
        <input class="course-search-input" placeholder="课程搜索">
            <a href="javascript:" class="course-search-btn">搜索</a>
</div>

  <style type="text/css">
  *{
    margin:0;padding:0;
  }
    ul ,li{
        list-style:none;
    }
.course-sidebar-search{
    margin:50px;
 }

    a{
        text-decoration:none;

    }
    #result{
        background-color:#ccccff;
        width:270px;
        position:absolute;
        margin:39px 0 0 -1px;
    }
.course-search-input{
    width:220px;
    height:30px;
}
#result li{
    margin-top:20px;
}
.course-search-btn{
    font-size:22px;
    background-color:#6600cc;
    line-height:30px;
}

示例3：居中即边缘定位对齐

• text-align控制的是nbsp的位置，然后 absolute利用了跟随性，让图片显示在nbsp的后面，在微调margin-left的值让图片正确显示在中间（margin-left等于负自身宽度的一半）
• display-inline也是很有用的，不然div还得另起一行