1 【Positioning(定位)】

Positioning作用：指定了元素的定位类型。position包括四个值：static，relative，fixed，absolute。

css定位解析：元素可以使用的顶部top，底部bottom，左侧left和右侧right属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

2 【position四大值介绍】

2-1【static 定位】

解释：HTML元素的默认值，即没有定位，元素出现在正常的流中。即：元素不可受到top, bottom, left, right的影响。

2-2【fixed 定位】

解释：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动：

　　　p.pos_fixed{position:fixed; top:30px; right:5px;}

运行结果：              

   

图1：浏览器滚动前：                                    图2：浏览器滚动后：　　　

因此：Fixed定位使元素的位置与文档流无关，因此不占据空间。Fixed定位的元素和其他元素重叠。

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.

2-3【relative 定位】

解释1：相对定位元素的定位是相对其正常位置。

解释2：可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

注意：相对定位元素经常被用来作为绝对定位元素的容器块。

2-4【absolute 定位】

解释1：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

注意：

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

2-5【重叠的元素】

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

一个元素可以有正数或负数的堆叠顺序：

解释：具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

注意： 如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。

css总结1：position定位:absolute/relative/fixed的更多相关文章

  1. position定位-absolute与fixed

    1. absolute 生成绝对定位元素,相对于static定位以外的第一个父元素进行定位. 2. fixed 生成绝对定位元素,相对于浏览器窗口进行定位.

  2. (转)Position定位：relative | absolute

    原文:http://hi.baidu.com/zxc0420/item/9ada5110845ba1e89c778a08 Position定位:relative | absolute 定位一直是WEB ...

  3. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  4. position:absolute/relative/fixed小结

    1.绝对定位:position:absolute; 当一个div块的位置被定义为绝对定位absolute时,也就意味着它失去了文档流的位置,后面的文档流会紧跟着补上来接替它的位置.如果上下左右的绝对偏 ...

  5. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  6. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  7. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  8. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  9. css中的position 的absolute和relative的区别（转）

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

随机推荐

  1. 在Toad中导入导出数据

    一.导出数据 右键点击所要导出的表名,选择“Export   Date”     二.导入数据   一.右键点击表名,选择“import  date” 二.下一步 三.下一步 四.下一步 在oracl ...

  2. PCB 封装中的 公差符号形位公差位置度

    PCB 封装中的 公差符号形位公差位置度 0.08 旁边的 十字加圆就是位置度的形位公差.

  3. linux 本地账号密码无法登陆(shell可以登录)，一直返回 登陆的login界面

    今天我在我虚拟机测试的时候遇到了一个问题.登陆centos一直是返回login,账号和密码没错,我也换了两个用户. 1.问题描述 我正常的输入用户名和密码 错误提示截图:返回登陆界面,我重新试了另外的 ...

  4. apt安装工具

    apt-cache search package 搜索包 apt-cache show package 获取包的相关信息,如说明.大小.版本等 sudo apt-get install package ...

  5. windows下通过Git Bash使用Git常用命令

    Git跟SVN最大不同的地方就是分布式.SVN的集中式与Git的分布式决定各自的业务场景.既然是分布式的,那么大部分操作就是本地操作.一般Git操作都是通过IDE,比如Eclipse,如果装了Git ...

  6. TCP，你懂的

    TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的.可靠的. 基于IP的传输层协议.TCP在IP报文的协议号是6.TCP是一个超级麻烦的协议 ...

  7. 位数问题(dp 递推）

    位数问题 时间限制: 1 Sec  内存限制: 128 MB提交: 35  解决: 19[提交][状态][讨论版][命题人:quanxing] 题目描述 在所有的N位数中,有多少个数中有偶数个数字3? ...

  8. 1122 Hamiltonian Cycle

    题意:包含图中所有结点的简单环称为汉密尔顿环.给出无向图,然后给出k个查询,问每个查询是否是汉密尔顿环. 思路:根据题目可知,我们需要判断一下几个条件:(1).首先保证给定的环相邻两结点是连通的:(2 ...

  9. Oracle sqlldr数据加载

    1 sqlldr 传统路径:sqlldr会利用sql插入为我们加载数据 直接路径加载:sqlldr不适用sql,直接格式化数据块,绕开undo,避开redo,最快的方法就是并行直接路径加载 sqlld ...

  10. day6心得

    面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法.     引子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思 ...