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?,单步 ...
随机推荐
- Ext 面向对象程序设计 入门篇
------ 命名空间 定义:对于类的组织定义方式代码: Ext.namespace("Ext.xgao"); ------ 类实例属性 定义:对于一个实例的特征描述代码: Ext ...
- 如何自动拼接 Update语句，仅Update已修改的字段
我们通常使用update语句更新数据库记录,例如使用update user set username='001', nickname='Tom', age=18 where id = 1语句更新use ...
- Linux C 程序 输入输出函数(THREE)
标准输入输出函数#include<stdio.h>stdio 是 standard input & output 的缩写 字符数据输入输出函数: putchar() , getch ...
- div+css实现的左右两个等高div
工作当中我们经常会有这样的需求,尤其是在一些内容页面或者网站后台管理页面:左边的div的高度会随着右边的div的内容的增加儿增加,右边div的高度也会随着左边div的内容的增加而增加,也就是左右两侧两 ...
- Oracle控制文件丢失,日志文件丢失
控制文件丢失: alter database backup controlfile to traces; shutdown immediate; @j:\db\script\orcl_ora_ctl_ ...
- 【转】iOS 9自带苹果式省电模式 依然软硬兼施
非本人总结,转自:http://news.91.com/apple/1506/21837672.html 说好的改善和优化,iOS 9真的带来了.且不说那些经过改善的功能,iOS 9 推出的低功耗模式 ...
- EasyUI portal自定义小图标，不是用js方式加载
<script src="~/Scripts/jquery.portal.js"></script> <script> $(function ( ...
- 产生一个长度为100的int数组，并向其中随机插入1-100，不能重复
]; ArrayList myList=new ArrayList(); Random rnd=new Random(); ) { ,); if(!myList.Contains(num)) myLi ...
- Bootstrap简易使用指南
1.框架 1.1全局样式 使用HTML5的doctype,scaffolding.less中定义全局样式,从2开始使用normalize.css,并使用reset.less进行简化 1.2默认栅格系统 ...
- maven编译的时候排除junit测试类
maven项目中使用junit进行单元测试,在进行编译的时候,可以通过2种方式排除test测试类的编译. 有2种方式 : 使用命令的时候带上参数 mvn install -Dmaven.test.sk ...