深入了解absolute

1.absolute与float的相同的特性表现
a.包裹性
b.破坏性:父元素没有设置高或宽，父元素的高或宽取决于这个元素的内容
c.不能同时存在

2.absolute独立使用，不与relative合用
* 超越overflow，无论是滚动还是隐藏

案例：

html

<div class="scroll">

    <a href="javascript:;" class="close" title="关闭"></a>

    <img src="1.jpg">

    <img src="2.jpg">

</div>

css

.scroll {

    width: 500px; height: 300px;

    margin: 200px auto 0;

    border: 1px solid #ccc;

    border-radius: 3px;

    box-shadow: 0 0 3px rgba(0,0,0,.35);

    background-color: #fff;

    overflow: auto;

}

.close {

    position: absolute;

    width: 34px; height: 34px;

    margin: -17px 0 0 483px;

    background: url(images/close.png) no-repeat;

}

img {

    display: block;

    margin: 10px;

}

* 将元素设置absolute,然后调整margin,如果使用top和left，其父元素还得relative

独立使用absolute的跟性特性，它会脱离文档流，并且跟在前面元素或文本的后面，也就是它原本应该存在的位置

案例1：

html

<div class="header">

    <div class="constr">

        <div class="nav">

            <h3 class="nav-list">

                <a href="#" class="nav-a">课程</a>

            </h3>

            <h3 class="nav-list">

                <a href="#" class="nav-a">问答</a>

            </h3>

            <h3 class="nav-list">

                <a href="#" class="nav-a">

                    求课<i class="icon-hot"></i>

                </a>

            </h3>

        </div>

    </div>

</div>

css

.constr { width: 1200px; margin-left: auto; margin-right: auto; }

.header { background-color: #2A2C2E; }

.nav { height: 60px; }

.nav-list { float: left; font-size: 14px; font-weight: 400; }

.nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }

.nav-a:hover { color: #fff; }

img { border: 0 none; vertical-align: bottom;/*img为行内元素，去底部留白*/ }

/*position单独使用，看效果*/

.icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(images/new.gif); }

案例2：

推荐与vip这两个小图标怎么布局

常见方式：给外层容器设置relative，然后给这两个图片absolute，然后分别left:0与right:0

而我利用独立使用absolute实现方式是这样的

html

<a href="#" class="course-list">

    <div class="course-list-img">

        <span class="icon-recom">推荐</span>

        <img  src="data:images/4.png"><i class="vip">vip</i>

    </div>

</a>

或者

<a href="#" class="course-list">

    <div class="course-list-img">

        <span class="icon-recom">推荐</span>

        <img  src="data:images/4.png"><!--

        --><i class="vip">vip</i>

    </div>

</a>

为什么要在img后面增加<!-- -->，因为换行是文本节点，absolute单独使用，为了使她脱离文档流，保持在于原本的应该存在的位置，效果如下
（或者将course-list-img设置为font-size:0;）

  vip已经absolute后，保证vip前面的元素是img

css

<style>

.course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }

.course-list-img { background-color: #6396F1; }

.icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }

.icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(images/vip.gif); text-indent: -9em; overflow: hidden; }

</style>

经典应用：高逼对齐思路

初学前端时，实现对齐，各种蒙逼，现在好了，自从有了它，小车开得呜呜呜

3.无依赖
要想不受relative限制的印象，不要使用top/bottom/left/right任何一个属性，或不使用使用auto作为值
表现: 脱离文档流、去浮动，跟随性

* IE7下用position:absolute;时，元素会成为inline-block,在外层套div解决这个bug

4.层级关系
后来者居上（别z-index了），弹窗类设置为2就好了，除特殊情况（交叉显示），否则z-inde冗余

5.absolute与width和height
a.可以相互替代（IE6不支持）
*top/bottom 和 left/right对立属性同时存在时，拉伸 - 不设置宽度或高度，就可以自动增高或增宽
例如要实现一个全屏自适应的50%黑色半透明遮罩层
html,body{height:100%;}
* 通常方案: overlay{position:absolute;width:100%;height:100%;left:0;top:0;}
* NB方案:overlay{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto}

b.相互支持性
* 容器拉伸，内部元素支持百分比width/height值
* 通常情况下
元素百分比height要想起作用，需要父级容器的height值不是auto
* 绝对定位拉伸下
即使父级容器的height值是auto，只要容器绝对定位拉伸形成，百分比高度值也是支持的。
例如实现:9宫格
.page{
position:absolute;
left:0;right:0;
top:0;bottom:0;
}
.page .list{
float:left;
height:33.3%;
width:33.3%;
}

c.相互合作性
如果拉伸和width/height同时存在
width/height设置的尺寸覆盖left/right/top/bottom拉伸的尺寸
例如: position:absolute;left:0;right:0;top:0;bottom:0;width:50%;
最后的尺寸为50%;
* 绝对居中特性：
当尺寸设置、拉伸以及margin:auto，同时存在，就有绝对定位元素的绝对居中效果
* 注意:支持IE8+本
* 分析:
.demo{width:400px;height:400px;background:#ccc;margin:0 auto;}可以实现居中
但是如果.demo是绝对定位的，已经脱离了文档流，margin:0 auto;不好使了
.demo{position:absolute;width:400px;height:400px;background:#ccc;margin:0 auto;}

这时要想居中有三种方式:
①设置其父容器relative，然后left:50%,margin-left:-demo的宽度
②在demo前加一个&nbsp,然后demo设置inline-block,最后给你父元素text-align:center;
③使其左右拉伸，就可以居中了
.demo{position:absolute;left:0;right:0;width:400px;height:400px;background:#ccc;margin:0 auto;}

其中:①适用于所有浏览器
②要想使用于所有浏览器，需要补丁*display:inline;*zoom:1;
③支持IE8+版本

巴特西

深入了解absolute

最新文章

热门文章