CSS-absolute详解（慕课网）

（本文参考慕课网视频教程CSS-position 并加以总结）
一、absolute与float，relative的关系
这里写图片描述

注：

absolute和float不能同时存在，对float元素添加absolute会去除浮动；对absolute元素使用float无效。
relative和absolute不是兄弟关系，是对立的分离的，absolute离开relative使用会更加强大
独立的absolute可以摆脱overflow的限制，无论是隐藏还是滚动

二、absolute与float
absolute与float具有相同的特性：包裹性和破坏性。（所以在很多页面布局中可以相互替换）
1）所谓包裹性指：父元素的宽度会收缩到和内部元素宽度一样。
例如：<p style="background-color:yellow">css你大爷</p>这里p的宽度是撑满整个屏幕的。
加上absolute之后，p的宽度恰好是内容的宽度：<p style="background-color:yellow;position:absolute;">css你大爷</p>
2）破坏性：
未使用absolute时，父元素内容是撑开的，使用absolute父元素高度塌陷
例：
html部分：

<div class="box">
    <img  class="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532584565134&di=52784729fc456fab368bcb77b775760e&imgtype=0&src=http%3A%2F%2Ftva2.sinaimg.cn%2Fcrop.241.879.750.421%2F90eb2137ly1flwqqsk1m3j21kw1kin27.jpg"/>
</div>

CSS部分：

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

三、relative与absolute
relative主要用于限制absolute，一旦父元素设置了relative，那么absolute子元素将相对于其父元素定位。例如要实现下面APP右上角的红圈：
这里写图片描述
通常的做法是将app图片所在的div设置为relative，将红圈设置为absolute，再设置top/right值，这样无论图片位置怎么改变，红圈位置都固定在右上角不变。
代码示例：
html:

<div class="app">
    <img src="http://d.hiphotos.bdimg.com/wisegame/wh%3D72%2C72/sign=75641176f11f4134e0620d791733a2f8/f11f3a292df5e0fe4a5f0594506034a85fdf72e4.jpg"/>
    <span class="icon">1</span>
</div>

css:

.app{
    display:inline-block;
    position:relative;
    margin:20px
}
.icon{
    background-color:#f00;
    color:#fff;
    border-radius:50%;
    text-align:center;
    position:absolute;
    width:20px;
    height:20px;
    right:-10px;
    top:-10px
}

这种依赖于relative的绝对定位，当布局需要调整，父元素的尺寸需要作出改变时，图标就会错位。所以应该充分利用absolute自身的特性，无论父元素如何改变，上面的图标都会牢牢固定。
对上面的例子作简单改进：

<div class="app">
    <img src="http://d.hiphotos.bdimg.com/wisegame/wh%3D72%2C72/sign=75641176f11f4134e0620d791733a2f8/f11f3a292df5e0fe4a5f0594506034a85fdf72e4.jpg"/>
    <span class="icon">1</span>
</div>

.app{
    display:inline-block;
    //这里父元素的relative去掉
    margin:20px
}
.icon{
    background-color:#f00;
    color:#fff;
    border-radius:50%;
    text-align:center;
    position:absolute;
    width:20px;
    height:20px;
    margin:-10px 0 0 -10px  //不用top和right了，改用margin进行偏移
}

三、无依赖的absolute定位
无依赖的意思：不受relative限制的absolute定位，行为表现上是不使用left/top/right/bottom任何一个属性或auto作为值。
无依赖定位的行为表现：
1. 脱离文档流：
2. 折翼的天使：折翼的天使特性表现为去浮动、位置跟随
注：
去浮动：绝对定位后，浮动是无效的，float+absolute与直接absolute是一样的。
位置跟随：原来什么位置，之后还是什么位置。原来是block，absolute之后依然是换行显示的，原来是inline或inline-block，跟在文字后面应用绝对定位后，依然是跟在文字后面，但在IE7浏览器下元素使用绝对定位后都会inline-block化，即使它之前是block
可以配合margin进行精确定位：
1.支持负值定位
2.超赞的兼容性–IE6

四.无依赖的 absolute 最佳实践：
1、图片图标绝对定位覆盖
这里写图片描述

注：使用

<div class="header">
    <div class="constr">
        <div class="nav">
            <h3 class="nav-list">
                <a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
            </h3>
            <h3 class="nav-list">
                <a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
            </h3>
            <h3 class="nav-list">
                <a href="http://www.imooc.com/seek/index" class="nav-a">
                    求课<i class="icon-hot"></i>
                </a>
            </h3>
        </div>
    </div>
</div>
<div class="main">
    <div class="constr">
        <div class="course">
            <a href="http://www.imooc.com/view/121" class="course-list">
                <div class="course-list-img">
                    <span class="icon-recom">推荐</span>
                    <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img1.sycdn.imooc.com/53d74f960001ae9d06000338-300-170.jpg"><!--
                    --><i class="icon-vip">vip</i>
                </div>
                <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
                <div class="course-list-tips">
                    <span class="l">已完结</span>
                    <span class="r">3514人学习</span>
                </div>
            </a>
        </div>
    </div>
</div>

css

body {
 font: 14px/1.4 "Microsoft YaHei"; 
}
body, h3, h5 { 
    margin: 0;
 }
img { 
    border: 0 none;
    vertical-align: bottom;
 }
.l { 
    float: left; 
}
.r {
     float: right;
  }
.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; 
    }
.course { 
    padding-top: 10px; 
    }
.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; 
    }
.course-list-h { 
    line-height: 50px;
    font-size: 14px;
    font-weight: 400;
    color: #363d40;
    text-align: center; 
    }
.course-list-tips {
    margin: 0 14px;
    font-size: 12px;
    color: #b4bbbf;
    overflow: hidden; 
    }

.icon-hot { 
    position: absolute;
    width: 28px;
    height: 11px;
    margin: -6px 0 0 2px;
    background: url(http://img1.sycdn.imooc.com/545304730001307300280011.gif); 
    }
.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(http://img1.sycdn.imooc.com/5453048000015d8800360036.gif);
    text-indent: -9em;
    overflow: hidden; 
    }

2.定位下拉框
3.居中、边缘定位
4.各种对齐溢出技巧实例,例如：*号时有时无对齐，图标对齐，文字溢出不够放
这里写图片描述

CSS-absolute详解（慕课网）

猜你喜欢