absolute和float的相同特性表现
-
破坏性：
-
包裹性：
absolute和float不能同时存在，对float元素添加absolute会去除浮动；对absolute元素使用float无效。
absolute、float和relative的关系
absolute和relative是分离的对立的，单独使用absolute时，功能更加强大。例如下图，给关闭按钮添加absolute可以摆脱overflow的限制，无论是滚动还是隐藏。
无依赖的absolute
不受relative限制的absolute定位，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值。
定位的行为表现
- 脱离文档流
- 位置跟随（原来在什么位置，之后还在什么位置）
- 去除浮动（使原来的浮动无效）
配合 margin/padding 进行精确定位
- 支持负值定位
- 兼容性强，可以兼容IE6
这种无依赖的
absolute定位是：不影响其它布局的绝对定位下的相对定位之王，它是独立的，不依赖于父元素的，不会被其它元素的变化所影响，更易于维护。
无依赖的 absolute 最佳实践
-
图片图标文字的布局
.icon-recom {
position: absolute; /*无依赖的绝对定位*/
line-height: 20px;
padding: 0 5px; /*利用padding调整位置*/
background-color: #f60;
color: #fff;
font-size: 12px;
tips：使用注释去除空白节点的小技巧
<span class="icon-recom">推荐</span> <img width="280" height="160" alt="分享" src="111.jpg"><!-- --><i class="icon-vip">vip</i>
-
下拉列表框的布局
.course-sidebar-result { display: none;
width: 260px;
position:absolute; /* 脱离文档流，不影响或不受其它元素影响*/
margin: 39px 0 0 -1px; /*具体定位*/
padding-left: 0;
list-style-type: none;
border: 1px solid #e6e8e9;
background-color: #fff;
box-shadow: 0px 1px 2px #d5d7d8;
font-size: 12px;
}
-
居中、边缘定位
<div class="loading-x">
<img src="http://img.gif" class="loading" alt="加载中...">
</div>
/**css部分**/
.loading-x {
height: 0;
margin-top: 20px;
text-align: center; /*设置空白占位符居中*/
letter-spacing: -.25em;
overflow: hidden;
}
.loading {
position: absolute; /* 脱离文档流，且位置跟随*/
margin-left: -26px; /*图片宽度的一半*/
}
<div class="course-fixed-x">
<div class="course-fixed">
<a href="./diaocha" class="goto_top_diaocha"></a>
<a href="./app" class="goto_top_app"></a>
<a href="./feedback" class="goto_top_feed"></a>
</div>
</div>
/**css部分**/
.course-fixed-x {
height: 0;
text-align: right; /*空白占位符右对齐*/
overflow: hidden;
}
.course-fixed {
display: inline; /*默认是block，会在下一行显示*/
position: fixed; /*无依赖定位，不需要计算，不受其它元素影响*/
margin-left: 20px;
bottom: 100px;
}
-
文本图标对齐与定位
- 星号与图标定位对齐
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>登录邮箱</label>
<div class="regist-cell">
<input type="email" class="regist-input"><span class="regist-remark regist-warn">
<i class="icon-warn"></i>邮箱格式不准确（演示）</span>
</div>
</div>
/****CSS****/
.regist-star {
position: absolute;
margin-left: -1em;
font-family: simsun;
color: #f30;
}
.regist-warn > .icon-warn {
position: absolute;
margin-left: -20px;
}
- 文本定位
<div class="regist-cell">
<input type="password" class="regist-input"><span class="regist-remark">请输入6-16位密码，区分大小写，不能使用空格</span>
</div>
/***CSS***/
.regist-remark {
position: absolute;
line-height: 21px;
padding-top: 9px;
color: #666;
}
absolute 和层级
- 由于
absolute脱离文档流，所以网页中的动画尽量作用在绝对定位元素上。 -
absolute元素在垂直空间，遵循后来居上原则，后面的绝对定位元素会在前面的绝对定位元素之上。 - z-index误区：绝对定位元素都需要z-index控制垂直位置。
- 如果只有一个绝对定位元素，不需要z-index，会自动覆盖普通元素。
- 如果两个绝对定位元素，控制DOM的前后顺序，达到需要的效果，依然不需要z-index。
- 如果多个绝对定位交错，很少见，使用
z-index:1控制即可。 - 如果非弹框类的绝对定位元素z-index>2，z-index冗余，需优化。
absolute 和 top/left/right/bottom
在有position:relative/absolute/fixed/sticky限制时，定位以限制容器为准，没有时，以整个页面容器为准。
只有一个方向的定位时，如：top，只会垂直方向移动，水平方向保持原来坐标。四个方向同时存在时，元素是直接拉伸。
top/left/right/bottom 与 width/height
相互替代性
例如，已知页面现有样式html,body{height:100%}，实现一个全屏自适应的50%黑色半透明遮罩层，通常实现如下：
.overlay{
position:absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
但还可以这样：
.overlay{
position:absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
绝对定位方向如果是对立的（如：leftVSright,topVSbottom），元素会被拉伸。
通常情况下，absolute元素的拉伸和width/height时可以相互替代的。
position:absolute;left:0;top:0;width:50%;
等同于：
position:absolute;left:0;top:0;right:50%;
拉伸特性只有IE7以上的浏览器支持
差异性——绝对定位拉伸更强大
例如实现一个距离右侧200px的全屏自适应的容器层。使用拉伸：
position: absolute;left: 0;right: 200px;height: 100%;
但，使用width只能使用css3的calc计算：
position:absolute;left:0;width:calc(100%-200px);
相互支持性
- 外部容器无需固定的
width/height值，内部元素亦可拉伸；
.container { /*外部容器*/
display: inline-block; /*使容器具有包裹性 */
position: relative; /*限制cover层的范围*/
}
.cover {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
background-color: green;
opacity: .5;
}
- 外部容器拉伸，内部元素支持百分比
width/height值。
- 通常情况下：元素百分比
height要想起作用，需要父级容器的height值不是auto。 - 绝对定位拉伸下：即使父容器的
height是auto只要父容器绝对定位拉伸，就可以设置百分比值。例如：
.page{ /*父容器绝对定位拉伸*/
position: absolute;
left: 0;top: 0; right: 0; bottom: 0;
}
.list{
float:left;
height:33.3%; /*可以设置百分比值*/
width:33.3%;
position:relative;
}
相互合作性
如果绝对定位拉伸和height/width同时存在，width/height设置的尺寸优于left/top/right/bottom拉伸的尺寸。例如：
position:absolute;top:0;left:0;right:0;width:50%; /*实际宽度是50%而不是100%，和顺序没有关系*/
使用尺寸限制、绝对定位拉伸及margin:auto，实现元素的绝对居中效果(IE8+支持)。
.image {
position: absolute;
left: 0;
right: 0;
margin: auto;
/* width: 50%; */
}
absolute 与网页整体布局
- body降级，子元素升级
升级子div(假设类名为page)作为最顶层容器，设置全屏拉伸。
.page{position:absolute;left:0;top:0;right:0;bottom:0}
- 各模块——头尾、侧边栏（pc端）各居其位
header, footer { position: absolute; left: 0; right: 0;} /*宽度100%拉伸*/
header {height: 48px; top:0;}
footer { height: 52px; bottom:0;}
aside { position: absolute; left: 0; top: 0;bottom: 0; width: 250px;} /*高度100%拉伸*/
- 内容区域想象成body
.content{
position:absolute;
top:48px;
bottom:52px;
left:250px; /*假如有侧边栏*/
overflow:auto; /*超出部分滚动*/
此时头部尾部以及侧边栏都是fixed效果，不跟随滚动，避免了移动端position:fixed实现的诸多问题。
- 全屏覆盖与page平级
.overlay{ /*遮罩层*/
position:absolute;
top:0;right:0;left:0;bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:9;
}
<div class="page"></div>
<div class="overlay"></div>
