CSS笔记(十)position属性与定位
参考:http://www.w3school.com.cn/cssref/pr_class_position.asp
position属性规定了元素的定位类型。任何元素都可定位,其中,绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
CSS 定位属性
CSS 定位属性允许你对元素进行定位。
| 属性 | 描述 |
|---|---|
| position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
| top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
| right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
| bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
| left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
| overflow | 设置当元素的内容溢出其区域时发生的事情。 |
| clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
| vertical-align | 设置元素的垂直对齐方式。 |
| z-index | 设置元素的堆叠顺序。 |
CSS笔记(十)position属性与定位的更多相关文章
- css布局学习笔记之position属性
position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...
- Css中的Position属性
Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...
- DIV CSS布局中position属性用法深入探究
本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...
- CSS笔记1:属性--定位
相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 元素定位 属性 版本 继承 描述 position c ...
- CSS中的position属性笔记
一般有5个属性,分别是:static,absolute,relative,fixed,inherit static 自然定位:这个是默认值,没有定位,再设置top,rignt,bottom,left会 ...
- css中关于position属性的探究(原创)
关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...
- 详解css中的position属性
这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...
- 对CSS中的Position属性的一些深入探讨
转:http://www.cnblogs.com/coffeedeveloper/p/3145790.html Position属性 Position的属性值共有四个static.relative.a ...
- 浅谈css中的position属性
我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
随机推荐
- 理解逐次逼近寄存器型ADC:与其它类型ADC的架构对比【转】
转自:http://bbs.dzsc.com/space/viewspacepost.aspx?postid=86760 摘要:逐次逼近寄存器型(SAR)模数转换器(ADC)占据着大部分的中等至高分辨 ...
- Dijkstra 算法、Kruskal 算法、Prim算法、floyd算法
1.dijkstra算法 算最短路径的,算法解决的是有向图中单个源点到其他顶点的最短路径问题. 初始化n*n的数组. 2.kruskal算法 算最小生成树的,按权值加入 3.Prim算法 类似dijk ...
- 转载WPF SDK研究 之 AppModel
Jianqiang's Mobile Dev Blog iOS.Android.WP CnBlogs Home New Post Contact Admin Rss Posts - 528 Artic ...
- PHP开发异步高性能的MySQL代理服务器
ySQL数据库对每个客户端连接都会分配一个线程,所以连接非常宝贵.开发一个异步的MySQL代理服务器,PHP应用服务器可以长连接到这台Server,既减轻MYSQL的连接压力,又使PHP保持长连接减少 ...
- javascript 中==和===的区别
对于JavaScript中比较运算符,可能大家用的比较多的是“==”.对于“===”很多人可能很陌生.=== 表示恒等,首先比较两边的变量数据类型是否相等,其次比较两边的变量的数值是否相等:= ...
- android中文件操作的四种枚举
1.MODE_PRIVATE:默认操作模式,代表该文件是私有数据,只能被应用自身访问,在该模式下,写入的的内容会覆盖原文件中的内容. 2.MODE_APPEND:该模式会检查文件是否存在,存在就往文件 ...
- python安装numpy科学计算模块
解决两个问题: (1)Import Error: No module named numpy (2)Python version 2.7 required, which was not found i ...
- 我的CSS样式记事本(1)
文本 行高: line-height 对齐方式: text-align 字符间距: letter-spacing 文本修饰: text-decoration字体 设置字体所有: font 字体类型: ...
- 织梦cms PHPcms 帝国cms比较
现在建网站不需要请程序员从基础的程序开发做起了,有专业的建站工具,CMS是使用最广泛的建站工具.CMS是Content Management System 现在建网站不需要请程序员从基础的程序开发做起 ...
- shell脚本之间互相调用
在Shell中要如何调用别的shell脚本,或别的脚本中的变量,函数呢? 方法一: . ./subscript.sh 方法二: source ./subscript.sh 注意: .两个点之间,有空格 ...