定位 position
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的更多相关文章
- css 温故而知新 定位(position)与权限(z-index)
1.进行定位(position)的元素的权限(z-index)永远比没有定位的高. 2.如果两个元素都定位了,无论是相对定位还是绝对定位.他们的权限都是等权的. 3.两个相同定位的元素,除了z-ind ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- css定位position认识
1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 通过定位position="fixed"实现网页内容的固定层效果
在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- CSS.04 -- 浮动float、overflow、定位position、CSS初始化
标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right : 设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...
- 定位--position属性
一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- 定位 position 透明度 opacity
1.position 定位 position:fixed 固定定位 position:relative 相对定位(不指定父级元素的话相对于document) position:absolute 绝对定 ...
随机推荐
- Android用户界面 UI组件--AdapterView及其子类(二) AdapterViewAnimator及其子类
AdapterViewAnimator:当在视图间切换时会显示动画. android:animateFirstView 定义ViewAnimation首次显示时是否对当前视图应用动画. android ...
- 《ruby编程语言》笔记2 对象
ruby是一门非常纯粹的面向对象的语言:所有值都是对象,而且没有基本类型(primitive type)和对象类型的区别,这一点不同于其他语言.在Ruby中,所有对象都继承一个Object类,而且共享 ...
- 【HDOJ】1963 Investment
完全背包. #include <stdio.h> #include <string.h> #define max(a, b) (a>b) ? a:b ], an[]; ] ...
- linux ERROR: ld.so: object '/lib/libcwait.so' from /etc/ld.so.preload cannot be preloaded: ignored.
[root@ora9i 3238244]# lsb_release -a LSB Version: :core-3.0-amd64:core-3.0-ia32:core-3.0-noarch:g ...
- devi into python 笔记(六)正则表达式 原始字符串
字符串函数replace: #string.replace: #字符串的replace方法:替换子串,不改变原来的字符串 s = "broad road" #打印出来会发现不单单是 ...
- 16位cpu下主引导扇区及用户程序的编写
一些约定 主引导扇区代码(0面0道1扇区)加载至0x07c00处 用户程序头部代码需包含以下信息:程序总长度.程序入口.重定位表等信息 用户程序 当虚拟机启动时,在屏幕上显示以下两句话: This i ...
- Unity给力插件之MeshBaker
这是一个用来合并网格.材质.贴图的插件. 其实网上也有一些比较详细的使用说明,但是真实操作起来时,总是有一些搞不清bug.而且,作为功能比较全的插件,在Unity版本更新时,也难免会一些不兼容的地方. ...
- hdoj 1047 Integer Inquiry
Integer Inquiry Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- jsp中如何获得url路径和绝对路径
jsp中如何获得url路径 request.getHeader("referer") JSP中获得当前应用的相对路径和绝对路径 根目录所对应的绝对路径:request.getReq ...
- spfa + slf优化
最近在练习费用流 , 不是要用spfa吗 ,我们教练说:ns学生写朴素的spfa说出去都让人笑 . QwQ,所以就去学了一下优化 . slf优化就是双向队列优化一下,本来想用lll优化,可是优化后我t ...