CSS:浅谈position属性(笔记)

前言

---

这两天,在做进度条的时候,使用到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;
}

运行结果如下(未加入动画).

结束

---

本篇算是笔记,没有可说的,到处结束,谢谢大家查看.