前言
这两天,在做进度条的时候,使用到position(定位)相关的知识点.主要是实现一个进度条效果,动画是使用move.js实现的(主要需要使用到动画结束回调方法),需要把进度条放在文字的下方,在此之前,只是了解过相关的Z-index属性可以实现的,对于CSS定位属性只是简单了解,并没有深入 ,在实现效果之后,这次做一下关于position属性的相关笔记,以备不时之需.需实现的效果如下图所示.
position 属性
注: 本模块可查看W3School ,大部分选自W3School教程.
position 属性在很多CSS教程网站上都有对应的介绍,例如菜鸟教程,W3School等等.这里在做一下简单的介绍.
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中. 所以position 属性一共可设置为四个值,分别是static、relative、absolute、fixed,默认的是static.
| 属性 | 介绍 |
|---|---|
| static | 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。 |
| relative | 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。 |
| absolute | 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |
| fixed | 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。 |
效果图实现
实现过程比较简单.动画这里就不不过多叙述了.首先看Html文件中的相关代码.(其实category_div这个div可以去除.😄)
<div id="category_div">
<div id="category_content_div">
<div id="progress_div"> </div>
<span id="category_title">知识点:xxx</span>
<span id="category_rate"><span id="category_rat_now">1</span>/<span id="category_rate_all">5</span></span>
</div>
</div>
CSS中我们主要实现category_content_div、progress_div、category_title、category_rate这四个div样式的修改.父级的position要设置为relative(相对定位).进度条的定位要设置为absolute(绝对定位).并且需要设置对应的Z-index,其他兄弟元素position要设置为relative(相对定位),同时也要设置Z-index.具体CSS样式核心代码如下所示.
#category_content_div {
position: relative;
margin: 0px 0px 0px 0px;
}
#progress_div {
position: absolute;
width: 100%;
height: 100%;
background-color: #facc5f;
z-index: 1;
}
#category_title {
color: white;
}
#category_title,
#category_rate {
position: relative;
z-index: 2;
}
运行结果如下(未加入动画).
结束
本篇算是笔记,没有可说的,到处结束,谢谢大家查看.
网友评论