CSS深入理解之absolute 笔记

作者: soojade | 来源:发表于2017-11-07 18:17 被阅读173次

CSS深入理解之absolute 笔记
深入理解CSS之absolute
2017-12-30
深入理解absolute
css实现水平垂直居中的几种方法
css position Absolute理解
CSS深入理解之relative 笔记
CSS深入理解之overflow 笔记
CSS行高
笔记: CSS深入理解vertical-align和line-h

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">
      &nbsp;<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">
    &nbsp;
    <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控制垂直位置。
1. 如果只有一个绝对定位元素，不需要z-index，会自动覆盖普通元素。
2. 如果两个绝对定位元素，控制DOM的前后顺序，达到需要的效果，依然不需要z-index。
3. 如果多个绝对定位交错，很少见，使用z-index:1控制即可。
4. 如果非弹框类的绝对定位元素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>