html结构是fixed包裹relative,relative包裹absolute

position:relative;相对定位

a 不影响元素本身的特性

b 不使元素脱离文档流(元素移动之后原始位置会被保留)

c 如果没有定位偏移量,对元素本身没有任何影响

d 提升层级

定位元素位置控制:top|right|left|bottom 定位元素偏移量

position:absolute;绝对定位

a 使元素完全脱离文档流

b 是内嵌支持宽高

c 如果有定位父级 相对于 定位父级发生偏移,没有定位父级相对于document(可视区域)发生偏移

d 相对定位一般都是配合绝对定位元素使用

f 提升层级

z-index: [number];定位层级

a 定位元素默认后者层级高于前者

b 建议在兄弟标签之间比较层级

position:fiexd;固定定位

与绝对定位的特性基本一致,差别是始终相对整个文档进行定位

问题:IE6不支持固定定位

定位其他值

position:static;默认值

position:inherit;从父元素继承定位属性的值(不兼容)

定位清浮动方法,遮罩滤镜

position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法

position:fiexd;固定定位元素子级的浮动可以不用写清浮动方法(IE6不兼容)

遮罩弹窗

标准不透明度:opacity:0-1

IE滤镜(IE6,7) :filter:alpha(opacity=0-100);

定位 position的更多相关文章

  1. css 温故而知新 定位(position)与权限(z-index)

    1.进行定位(position)的元素的权限(z-index)永远比没有定位的高. 2.如果两个元素都定位了,无论是相对定位还是绝对定位.他们的权限都是等权的. 3.两个相同定位的元素,除了z-ind ...

  2. 定位 position: absolute & relative

    [position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...

  3. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

  4. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  5. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  6. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  7. CSS.04 -- 浮动float、overflow、定位position、CSS初始化

    标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right :  设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...

  8. 定位--position属性

    一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) ...

  9. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  10. 定位 position 透明度 opacity

    1.position 定位 position:fixed 固定定位 position:relative 相对定位(不指定父级元素的话相对于document) position:absolute 绝对定 ...

随机推荐

  1. Android listview.item.clear()与listview.clear()的区别

    listview.clear()与listview.item.clear()的区别就是使用了listview.item.clear()后,listview控件中仍然保存着listviewitem项的结 ...

  2. Hash Killer I II

    题意大概: 1.字符串hash不取模,自动溢出  构造数据卡这种hash 2.字符串hash取模1000000007,构造数据卡这种hash 题解传送门:VFleaKing http://vfleak ...

  3. LinkedIn高级分析师王益:大数据时代的理想主义和现实主义(图灵访谈)

    转自:http://www.ituring.com.cn/article/75445 王益,LinkedIn高级分析师.他曾在腾讯担任广告算法和策略的技术总监,在此期间他发明了并行机器学习系统“孔雀” ...

  4. 卸载系统自带的JDK的脚本并再次安装

    卸载系统自带的JDK的脚本并安装1.6.0.32版本的jdk #!/bin/bash homefile=/usr/local/java cd $homefile homelist=`sudo rpm ...

  5. Python生成器 yield

    迭代器与list相比较,就for in句型循环拿数据而言: 用list写很简洁,但如果list数据过大,会很消耗资源. 用iteration 迭代器写,则不会消耗那么多资源.他会随用随取,用一个拿一个 ...

  6. Unity3d 模拟视锥的实现

    一个独立游戏 Teleglitch 使用了一种欺骗手法来模拟视锥,效果如下: 博主看了看了看提示 Actually, the line of sight shadows aren’t done wit ...

  7. 《使用wxWidgets进行跨平台程序开发》chap02——一个简单的应用程序

    // Name: minimal.cpp // Purpose: Minimal wxWidgets sample // Author: Julian Smart #include "wx/ ...

  8. Android游戏与应用开发最佳学习路线图

    Android 游戏与应用开发最佳学习路线图 为了帮助大家更好的学习 Android,并快速入门特此我们为大家制定了以下学习路线图,希望能够帮助大家. 一.路线图概括: 二.具体需要掌握知识点: 三. ...

  9. Delphi 7下使用Log4Delphi 0.8日志组件

    Log4Delphi是一个开放源码项目,旨在制作用于Borland的Delphi高质量实用的日志套件,是基于Apache Software Foundation的log4j包. 安装:         ...

  10. 1116 HTML CSS

    1. JPEG和GIF在使用时的注意事项: JPEG可以连续调次(复制品中有中间层次,如照片)图像中获得最好效果:JPEG可以用1600万色显示图像,是有损格式,不支持透明. GIF适用于几种纯色组成 ...