之前看过多次 CSS 绝对定位, 但是缺乏一个好的案例. 偶尔看到一个控件, 觉得用它来说明是非常简明的.
假设我们有一个 DIV, 内部还嵌入两个平级的 DIV, 代码如下:
- <div class="wrapper">
- <div class="block1"></div>
- <div class="block2"></div>
- </div>
- <style>
- .wrapper{border: solid 1px;height:20px;width:220px;}
- .block1{background: red;height:10px;}
- .block2{background:blue;height:10px;width:100%;}
- </style>
那么按照默认的盒子模型, 两个平级的 DIV 一上一下, 占满整个父亲 DIV. 如果想要让第二个 DIV 覆盖第一个怎么办?
此时就必须取消默认排版过程, 转而使用绝对定位. 方法就是设置. block2 直接相对. wrapper 定位, top 距离为 0 即可. 具体做法就是在. wrapper 内加入代码:
position:relative
添加 CSS 代码到. block2 内:
position:absolute;top:0;
就可以看到. block2 覆盖于. block1 之上. 这样就达到了我们希望的效果了.
使用完全相同的结构, 我们可以制作一个进度条控件:
- <style>
- .progress { position: relative; border: solid 1px;width: 100px;height:1rem;}
- .progress> .bar { background: red; height: 100%; width:10%}
- .progress> .label {position: absolute; top: 0; left: 0; width: 100%;
- text-align: center; font-size: 0.8rem; }
- </style>
- <div class="progress">
- <div class="bar"></div>
- <div class="label">10%</div>
- </div>
这里的. label 正是通过对其父容器. progress 的绝对定位, 实现了. bar 和. label 的重合, 从而实现的进度条效果.
来源: https://juejin.im/post/5c04f207f265da61530486af