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的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...
随机推荐
- 161205、win10安装mysql5.7.16数据库
1.下载mysqlk数据库http://dev.mysql.com/downloads/file/?id=467269 2.解压到本地目录 3.复制一份my-default.ini 修改名称为my.i ...
- 161020、web调试工具fiddler介绍及使用
简介: Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的"进出"Fiddler的数据(指cookie,ht ...
- zabbix agent 类型自带的key
zabbix服务器端通过与zabbix agent通信来获取客户端服务器的数据,agent分为两个版本,在配置主机我们可以看到一个是agent,另一个是agent(active). agent:zab ...
- 正则表达式用户名密码电话身份证Email使用
月末了,这个月才写了2遍文章,对自己略感失望了,最近是有些忙,等闲些日子后,再整理一些文章分享给大家! 这遍是关于正则表达式,因为写项目时要用到正则表达式,所以就学习了下,另写一遍文章,方便记忆! 1 ...
- java正则表达式四种常用的处理方式是怎么样呢《匹配、分割、代替、获取》
java 正则表达式高级篇,介绍四种常用的处理方式:匹配.分割.替代.获取,具体内容如下package test; import java.util.regex.Matcher; import jav ...
- JSONArray遍历
java代码 方法一: 1 2 3 4 5 JSONArray array = JSONArray.fromObject(data); for (Object object : array) { ...
- 20145227 《Java程序设计》第4周学习总结
20145227 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1 何谓继承 1.继承共同行为 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中, ...
- Git and GitHub
1.GitHub 创建一个仓库 2.进入本地要管理的某个文件夹下,感觉目录的操作命令和linux里面差不多, $git init 此时该文件下就会多出一个.git的文件 3.进入要上传的仓库,右键gi ...
- js 表单操作
order.aspx 订单页- order-detail.aspx订单确认页- 操作:order.aspx提交订单@1,跳转到order-detail.aspx页面,确认页面操作:返回上一步@2- ...
- Power Strings 分类: POJ 串 2015-07-31 19:05 8人阅读 评论(0) 收藏
Time Limit:3000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Status Practice POJ ...