CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题：CSS的position属性。首先归纳出和position相关的问题：
- position作为一个属性，它一共有哪几个属性值？
- position常用的属性值有哪几个？分别有什么特点？
第一个问题：position作为一个属性，它一共有哪几个属性值？
对于position属性，他一共有5个值，分别是
- static：默认值。没有定位，元素出现在正常的流中。
- relative：生成相对定位的元素，相对于其正常位置进行定位。正常位置也就是指如果没有position属性它会出现的位置。
- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。这里需要注意一下，absolute的参照对象是第一个拥有非static的position属性的父级元素，后面会详细解释。
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
- 规定应该从父元素继承 position 属性的值。
这种定义性质的问题，一般在W3cSchool上可以找到最标准的的答案，这5种属性的解释已经非常详细。其实我们在开发中经常用的只有relative、absolute、fixed这3个属性，另外当给元素增加了这是种属性中的任意一种，我们也就需要根据情况设置元素的left/top/right/bottom以及z-index，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，显示层级通过z-index控制。
第二个问题：position常用的属性值有哪几个？分别有什么特点？
上面已经提到了我们常用的3个属性值：relative、absolute、fixed。
relative：元素的position属性设置为relative后，这个元素会以自己之前的位置为参照，根据设置的left等值进行移动。下面举个栗子~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
width: 100px;
height: 100px;
background-color: #0044aa;
margin: 5px;
}
#div2{
width: 100px;
height: 100px;
background-color: #e13b00;
margin: 5px;
position: relative;
left: 50px;
top:50px;
z-index: -2;
}
#div3{
width: 100px;
height: 100px;
background-color: yellow;
margin: 5px;
} </style>
</head>
<body>
<div style="height: 1000px">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
</body>
</html>
代码的效果如下图：
aaarticlea/png;base64,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" alt="" />
第二个div是根据它之前的位置进行了移动，并且它之前的位置并没有被后面的元素占据。红色的div被黄色的div遮盖是因为z-index的作用。
absolute：对于position属性是 static 定位以外的第一个父元素进行定位。这里需要详细分析一下这句话：首先我们可以判断出，absolute定位参照的对象是它拥有定位属性的父级元素；然后，这个父级元素的position属性不能是static。
这里再想细一点：如果元素没有拥有position属性的父级元素怎么办？ 这里我通过查资料确定了这种情况它会根据<html>标签也就是页面的根节点进行定位。（注意是<html>标签）
下面将div2的position属性改为absolute查看效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAADtCAIAAAByGXNZAAAC/UlEQVR4nO3Sy01EMRBFQefFlmjJikggAjgjMdjtUR3d/ft0rS+pWqdfQBdEiTpK1FGijhJ1PypZ7x/24HYe7EiUUNJRQklHCSUdJZR0lFDSUUJJRwklHSWUdJRQ0lFCSUcJJR0llHSUUNJRQklHCSUdJZR0lFDSUUJJRwklHSWUdJRQ0lFCSUcJJR0llHSUUNJRQklHCSUdJZR0lFDSUUJJRwklHSWUdJRQ0lFCSUcJJR0llHSUUNJRQklHCSUdJZR0lFDSUUJJRwklHSWUdJRQ0lFCSUfJE/b5tg6OkjtGiVFCCSWUUELJlFFilFBCCSWUUDJllBgllFBCCSWUTBklRgkllFBCCSVTRolRQgkllFBCyZRRYpRQQgkllFAyZZQYJZRQQgkllEwZJUYJJZRQQgklU0aJUUIJJZRQQsmUUWKUUEIJJZRQMmWUGCWUUEIJJZRMGSVGCSWUUEIJJVNGiVFCCSWUUPK/Ss529r/ftQ3noOT6bTgHJddvwzkouX4bzkHJ9dtwjl+esezBUWKUUEIJJZRQMmWUGCWUUEIJJZRMGSVGCSWUUEIJJVNGiVFCCSWUUELJlFFilFBCCSWUUDJllBgllFBCCSWUTBklRgkllFBCCSVTRolRQgkllFBCyZRRYpRQQgkllFAyZZQYJZRQQgkllEwZJUYJJc/Zi0cJJR0llHSUUNJRQklHCSUdJZR0lFDSUUJJRwklHSWUdJRQ0lFCSUcJJR0llHSUUNJRQklHCSUdJZR0lFDSUUJJRwklHSWUdJRQ0lFCSUcJJR0llHSUUNJRQklHCSUdJZR0lFDSUUJJRwklHSWUdJRQ0lFCSUcJJR0llHSUUNJRQklHCSUdJZR0lFDSUUJJRwklHSWUdJRQ0lFCSUcJJR0llHSUUNJRQklHCSUdJZR0lFDSUUJJRwkl3et/of4eJeooUUeJOkrUUaKOEnWUqKNEHSXqKFFHiTpK1FGijhJ1lKijRB0l6ihRR4k6StRRoo4SdZSoo0QdJeq+AfkGElTxQH9sAAAAAElFTkSuQmCC" alt="" />
这样我们就可以发现红色div移动之前的位置会被黄色的占据，这时候其实表示红色的div已经脱离了文档流。
最后一个属性值：fixed.它的效果其实和absolute类似，都属于绝对定位，但是它的参照则是固定的浏览器窗口。修改div2的position属性改为fixed后，滚动鼠标滚轴就可以查看效果，利用这个特性我们可以做出类似侧边悬浮窗（某些网站侧边的小广告(ノಠ益ಠ)ノ彡┻━┻）这样的效果。
其实，我在学习position过程中感觉到，掌握好元素的参照物是理解position属性的关键，确定好参照物，然后再根据属性值的类型判断后面的元素的状态，就能确定好元素的位置啦~
PS：通过这几天自己提问自己想办法解答的学习过程，真的收获很多。其实平时学习过程中忽略的细节还是很多的，经历了这样的一个过程自己的基础知识又扎实了不少~另外我还发现利用博客来分享知识更是个快乐的过程，又能提高编程技术又能提高表达能力，同时还有可能帮助到别人，所以一定要坚持下去！！(╰_╯)#
2016年1月11日
不积跬步，无以至千里
CSS学习笔记——定位position属性的学习的更多相关文章
- css布局学习笔记之position属性
position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- WPF 学习笔记－设置属性使窗口不可改变大小
原文:WPF 学习笔记-设置属性使窗口不可改变大小 调整Windows下的ResizeMode属性: ResizeMode = NoResize Resize属性是控制Windows是否可以改变大小, ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- 《Java学习笔记(第8版)》学习指导
<Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...
- Hadoop学习笔记(10) ——搭建源码学习环境
Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...
随机推荐
- PHPExcel说明
下面是总结的几个使用方法include 'PHPExcel.php';include 'PHPExcel/Writer/Excel2007.php';//或者include 'PHPExcel/Wri ...
- iis7如何取消目录的可执行权限
我们需要把IIs中某一个目录的可执行权限去掉.这在IIs6中是非常方便的,可是因为iis7的机制小编也找了不少资料才找到. 第一步:先选择需要取消权限的目录,然后在右边可以看到 “处理程序映射” 双击 ...
- Nginx+Keepalived主备负载均衡
实验环境及软件版本: CentOS版本: 6.6(2.6.32.-504.el6.x86_64) nginx版本: nginx-1.6.2 keepalived版本:keepalived ...
- Oracle wrap 测试的一些细节问题
今天在做 wrap 的测试实验的时候,出现一个很奇怪的现象,就是加密不成功.具体表现为:1.加密后的文件大小为0kb. 2.加密后的文件仍然可视. 具体测试步骤如下: D:\Just4work\som ...
- 使用openxml读取xml数据
xml的数据格式如下: <?xml version="1.0"?> <Language Name="Chinese"> <Loca ...
- Python Socket，How to Create Socket Server? - 网络编程实例
文章出自:Python socket – network programming tutorial by Silver Moon 原创译文,如有版权问题请联系删除. Network programin ...
- 标准初始化css样式表
body { font-size:12px; line-height:1.3; font-family:'微软雅黑', Tahoma,Helvetica,Arial,'宋体', sans-serif; ...
- python:UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xef in position xxx: ordinal not in range(128)
执行sql_cmd = "select * from item_base where item_id in " + item_ids_str时报错 solve: import sy ...
- 第五章 HID设备
5.1 HID介绍 为简化USB设备的开发过程,USB提出了设备类的概念.所有设备类都必须支持标准USB描述符和标准USB设备请求.如果有必要,设备类还可以自行定义其专用的描述符和设备请求,这分别被称 ...
- Type-C设计上的防护
Type C设计上各家芯片公司都提供了很多方案,但在防护方面很多留给了客户自己选择,这方面我可以重点聊聊,说起防护,无非就是过压过流防护. 过压防护,Type C的信号线有很多,都需要做静电防护,US ...