logo头像

叩首问路,码梦为生

CSS深入理解之absolute

1. 超越 overflow

独立的 absolute 可以摆脱 overflow 的限制,无论是滚动还是隐藏

2. 无依赖的 absolute

不受 relative 限制的 absolute 定位,行为表现上是不使用 top / right / bottom / left 任何一个属性或使用 auto 作为值

3. 定位的行为表现

  • 脱离文档流
  • 去浮动:absolute 生效的时候,float 是失效的
  • 位置跟随:原来是什么位置,绝对定位后依然是什么位置(元素是 block,absolute 之后依然是 block,inline 时 absolute 后依然是 inline)
  • 可以配合 margin 来精确定位
  • 注释 <!\-\- --> 可以消除换行后的空白,同时保持代码可读性

4. 居中以及边缘对齐定位

居中

采用 text-align:center 使 div 中的空格居中,利用 absolute 的跟随性 配合 margin 负值自身宽度 50% 实现居中。

html:

1
2
3
<div class="course-loading-x">
<img src="http://img.mukewang.com/5453077400015bba00010001.gif" class="course-loading" alt="加载中...">
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
.course-loading-x { 
height: 0;
margin-top: 20px;
text-align: center;
letter-spacing: -.25em;
overflow: hidden;
}
.course-loading {
position: absolute;
margin-left: -26px;
}

边缘定位

采用 text-align:right 使 div 中的空格居右(fixed 是直接相对于窗口定位,而直接用 absolute 和 right,bottom 是会受到父级 relative 限制的。所以为了避免受到父级影响,使用fixed)

html:

1
2
3
4
5
6
<div class="course-fixed-x">
<div class="course-fixed">
<a href="http://www.imooc.com/activity/diaocha" class="goto_top_diaocha"></a>
<a href="http://www.imooc.com/user/feedback" class="goto_top_feed"></a>
</div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
.course-fixed-x { 
height: 0;
text-align: right;
overflow: hidden;
}
.course-fixed {
display: inline;
position: fixed;
margin-left: 20px;
bottom: 100px;
}

5. 处理对齐、溢出技巧

处理文字前的星号

将星号绝对定位后其不占据任何空间,方便后面的文字左对齐

html:

1
2
3
<label class="regist-label">
<span class="regist-star">*</span>登录密码
</label>

css:

1
2
3
4
5
6
.regist-star { 
position: absolute;
margin-left: -1em;
font-family: simsun;
color: #f30;
}

图片与文字垂直对齐

对图标设置绝对定位,并设置 margin 为负值

html:

1
2
3
<span class="regist-remark regist-warn">
<i class="icon-warn"></i>邮箱格式不准确(演示)
</span>

css:

1
2
3
4
5
6
7
8
.regist-warn { 
padding-left: 20px;
color: #be3948;
}
.regist-warn > .icon-warn {
position: absolute;
margin-left: -20px;
}

处理文字溢出

利用 absolute 绝对定位使 span 不占据任何空间,从而使其不换行(注 <span> 必须紧跟前一个标签,不能有空格)

html:

1
<span class="regist-remark">请输入6-16位密码,区分大小写,不能使用空格</span>

css:

1
2
3
4
5
6
.regist-remark { 
position: absolute;
line-height: 21px;
padding-top: 9px;
color: #666;
}

6. 脱离文档流

回流与重绘

由于回流与重绘的缘故,动画尽量作用在绝对定位元素上

垂直空间的等级

z-index 潜在『误区』:绝对定位元素都需要 z-index 控制等级以确定其显示的位置

absolute 是 z-index 无依赖的:

  1. 如果只有一个绝对定位元素,则会自动覆盖普通元素
  2. 如果有两个绝对定位,可以控制 DOM 流的前后顺序达到覆盖效果(后来居上)
  3. 如果多个绝对定位交错(非常少见),则用 z-index:1 控制
  4. 如果非弹框类的绝对定位元素 z-index > 2,必定 z-index 冗余,需要优化

7. absolute 的 top / right / bottom / left 和 width / height

absolute 元素使用 top / right / bottom / left 可以让元素在容器内自由定位

但是遇到属性为 position: relative / absolute / fixed / sticky<div> 时,则只能到这一层为止,无法突破这一层。

使用 top / right / bottom / left 实现『拉伸』

当绝对定位的方向是『对立』的(如 left 和 right),则不是瞬间位移,而是『拉伸』效果 『position: absolute;left: 0;top: 0;width: 50%』等价于『position: absolute;left: 0;top: 0;right: 50%』

没有宽度和高度声明实现的全屏自适应效果:

1
2
3
4
5
6
7
8
9
.overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #000;
opacity: .5;
}

高度自适应的九宫格效果

1
2
3
4
5
6
7
8
9
10
11
12
13
.page{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.list {
float: left;
height: 33.3%;
width: 33.3%;
position: relative;
}

left / right 和 width 同时存在

相互支持性:

  • 容器无需固定 width / height 值,内部元素亦可拉伸(可实现图片上一张 / 下一张的遮盖层效果)
  • 容器拉伸,内部元素支持百分比 width / height 值

优先级:width / height > left / right

支付宝打赏 微信打赏

听说赞过就能年薪百万