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. Oracle GoldenGate理论

    1Oracle GoldenGate处理方法和支持的数据库Oracle GoldenGate在多样和异构的基础IT平台中,可以在事务级别上进行数据交换和数据操作.在保证交易完整性和最小的开销的条件下, ...

  2. dataView 工具栏

    option = { tooltip : { trigger: 'axis' }, legend: { data:['最高','最低'] }, toolbox: { show : true, orie ...

  3. SCSI, (P)ATA, SAS, NL-SAS and SATA, what’s the difference?

    Everybody needs storage space nowadays. Whether it is used for high performance computing or simply ...

  4. 1122 Hamiltonian Cycle

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

  5. python开发进程：进程开启方式&多进程

    一,进程的开启方式 利用模块开启进程 from multiprocessing import Process import time,random import os def piao(name): ...

  6. 32位机，CPU是如何利用段寄存器寻址的

    转自:http://blog.sina.com.cn/s/blog_640531380100xa15.html 32位cpu 地址线扩展成了32位,这和数据线的宽度是一致的.因此,在32位机里其实并不 ...

  7. springboot成神之——拦截器

    本文介绍spring boot拦截器 创建拦截器类LogInterceptor.java 创建拦截器类OldLoginInterceptor.java 拦截器配置类WebMvcConfig.java ...

  8. php写一个判断是否有cookie的脚本

    前言: 刚刚学习完cookie函数,写个练习. 0x01: //其实第二个应该改为elseif,但是我懒.啊哈 <?php $vlas="BnJhiFoPS4"; if(is ...

  9. plsql中调试函数 转

    1.首先在函数名上右键Test 2.进入调试界面后,界面下方会出现变量列表,在下图中value的栏中填入输入参数后,点击下图左上方带放大镜的绿色三角 3.此时进入调试模式,点击下图中的第一个蓝色方框, ...

  10. Dev TreeList基本用法

    public partial class treelist_shijian : DevExpress.XtraEditors.XtraForm      {          public treel ...