# CSS 绝对定位释义

栏目: CSS · 发布时间: 5年前

内容简介:之前看过多次CSS绝对定位,但是缺乏一个好的案例。偶尔看到一个控件,觉得用它来说明是非常简明的。假设我们有一个DIV,内部还嵌入两个平级的DIV,代码如下:那么按照默认的盒子模型,两个平级的DIV一上一下,占满整个父亲DIV。如果想要让第二个DIV覆盖第一个怎么办?

之前看过多次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的重合,从而实现的进度条效果。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

剑指Offer

剑指Offer

何海涛 / 电子工业出版社 / 2014-6-1 / CNY 55.00

《剑指Offer——名企面试官精讲典型编程题(纪念版)》是为纪念本书英文版全球发行而推出的特殊版本,在原版基础上新增大量本书英文版中的精选题目,系统整理基础知识、代码质量、解题思路、优化效率和综合能力这5个面试要点。全书分为8章,主要包括面试流程:讨论面试每一环节需要注意的问题;面试需要的基础知识:从编程语言、数据结构及算法三方面总结程序员面试知识点;高质量代码:讨论影响代码质量的3个要素(规范性......一起来看看 《剑指Offer》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具