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,iVBORw0KGgoAAAANSUhEUgAAAQsAAAFGCAIAAADy8S23AAAF+0lEQVR4nO3TwY0dRgwFwZ+Xr4pWWTkSKYJt7EHWMwdVYAADcvrzC/jaZ/0A+F9TCBSFQFEIFIVAUQiULwv5/Phpvjl/82D8ZQpRCEUhCqEoRCEUhSiEohCFUBSiEIpCFEJRiEIoClEIRSEKoShEIRSFKISiEIVQFKIQikIUQlGIQigKUQhFIQqhKEQhFIUohKIQhVAUohCKQhRCUYhCKApRCEUhCqEoRCEUhSiEohCFUBSiEIpCFEJRiEIoClEIRSEKoShEIRSFKISiEIVQFKIQikIUQlGIQigKUQhFIQqhKEQhFIUohKIQhVAUohCKQhRCUYhCKApRCEUhCqEoRCEUhSiEohCFUBSiEIpCFEJRiEIoClEIRSEKoShEIRSFKISiEIVQFKIQikIUQlGIQigKUQhFIQqhKEQhFIUohKIQhVAUohCKQhRCUYhCKApRCEUhCqEoRCEUhSiEohCFUBSiEIpCFEJRiEIoClEIRSEKoShEIRSFKISiEIVQFKIQikIUQlGIQigKUQhFIQqhKEQhFIUohKIQhVAUohCKQhRCUYhCKApRCEUhCqEoRCGULwsBfikEmkKgKASKQqAoBIpCoCgEikKgKASKQqAoBIpCoCgEikKgKASKQqAoBIpCoCgEikKgKASKQqAoBIpCoCgEikKgKASKQqAoBIpCoCgEikKgKASKQqAoBIpCoCgEikKgKASKQqAoBIpCoCgEikKgKASKQqAoBIpCoCgEikKgKASKQqAoBIpCoBwr5N9/Puabs77VI47tcf7tDs36Vo84tsf5tzs061s94tge59/u0Kxv9Yhje5x/u0OzvtUjju1x/u0OzfpWjzi2x/m3OzTrWz3i2B7n3+7QrG/1iGN7nH+7Q7O+1SOO7XH+7Q7N+laPOLbH+bc7NOtbPeLYHuff7tCsb/WIY3ucf7tDs77VI47tcf7tDs36Vo84tsf5tzs061s94tge59/u0Kxv9Yhje5x/u0OzvtUjju1x/u0OzfpWjzi2x/m3OzTrWz3i2B7n3+7QrG/1iGN7nH+7Q7O+1SOO7XH+7Q7N+laPOLbH+bc7NOtbPeLYHuff7tCsb/WIY3ucf7tDs77VI47tcf7tDs36Vo84tsf5tzs061s94tge59/u0Kxv9Yhje5x/u0OzvtUjju1x/u0OzfpWjzi2x/m3OzTrWz3i2B7n3+7QrG/1iGN7nH+7Q7O+1SOO7XH+7Q7N+laPOLbH+bc7NOtbPeLYHuff7tCsb/WIY3ucf7tDs77VI47tcf7tDs36Vo84tsf5tzs061s94tge59/u0Kxv9Yhje5x/u0OzvtUjju1x/u0OzfpWjzi2x/m3OzTrWz3i2B7n3+7QrG/1iGN7nH+7Q7O+1SOO7XH+7Q7N+laPOLbH+bc7NOtbPeLYHuff7tCsb/WIY3ucf7tDs77VI47tcf7tDs36Vo84tsf5tzs061s94tge59/u0Kxv9Yhje5x/u0OzvtUjju1x/u0OzfpWjzi2x/m3OzTrWz0i9vgx35x5DAr57yhEIRSFKISiEIVQFKIQikIUQlGIQigKUQhFIQqhKEQhFIUohKIQhVAUohCKQhRCUYhCKApRCEUhCqEoRCEUhSiEohCFUBSiEIpCFEJRiEIoClEIRSEKoShEIRSFKISiEIVQFKIQikIUQlGIQigKUQhFIQqhKEQhFIUohKIQhVAUohCKQhRCUYhCKApRCEUhCqEoRCEUhSiEohCFUBSiEIpC/sjwLIUohKIQhVAUohCKQhRCUYhCKApRCEUhCqEoRCEUhSiEohCFUBSiEIpCFEJRiEIoClEIRSEKoShEIRSFKISiEIVQFKIQikIUQlGIQigKUQhFIQqhKEQhFIUohKIQhVAUohCKQhRCUYhCKApRCEUhCqEoRCEUhSiEohCFUBSiEIpCFEJRiEIoClEIRSEKoShEIRSFKISiEIVQFKIQikIUQlGIQigKUQhFIQqhKEQhFIUohKIQhVAUohCKQhRCUYhCKApRCMV1oSgEikKgKASKQqAoBIpCoCgEikKg/AaNUwbNriVCRwAAAABJRU5ErkJggg==" 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?,单步 ...
随机推荐
- 安装FreeMind
Freemind 1.0.0 官方正式版下载地址:http://dl.pconline.com.cn/html_2/1/131/id=46751&pn=0.html 软件介绍: Freemin ...
- ubuntu12修改ulimit
第一步:配置/etc/security/limits.confsudo vim /etc/security/limits.conf文件尾追加 * hard nofile 40960* soft nof ...
- Linux下UDP收/发广播消息简单实现
发送广播消息 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<sys/typ ...
- el-get
el-get Table of Contents 1. 依赖 2. 安装 3. 配置 3.1. 自定义包配置 4. 命令 5. 管理扩展 el-get 是一个emacs下的扩展管理工具.就像apt-g ...
- 路由器无线桥接 router wireless bridge
实验环境:TP-Link A,TP-Link B,两个路由器都有子网,分别为子网 A,子网 B.TP-Link A连接学校子网 IP A,TP-Link B连接学校子网 IP B.两个路由器都能够通过 ...
- json,serialze之格式
<?php echo 'array-json:' . "\n"; $arr = array('key1'=>'value1', 'key2' => 'value2 ...
- trigger
trigger() 方法触发被选元素的指定事件 <html><head><script type="text/javascript" src=&quo ...
- 如何更改Chrome默认的搜索引擎
1 打开Chrome浏览器之后,点击窗口右上角的图标,在弹出的菜单中点击设置,如图所示: 2 在打开的窗口中,点击管理搜索引擎,如下图所示: 3 在弹出的窗口中,找到百度的搜索引擎或者bing的搜索 ...
- 利用getComputedStyle方法获取元素css的属性值
在平时的工作中有时候会碰到需要获取元素当前样式的问题,查了一下可以用getComputedStyle这个方法来获取元素计算后的样式(有些我们在css里面没有写的,浏览器默认的样式也可以获得) getC ...
- laravel1
生成模型的时候 同时生成migration文件php artisan make:model User --migration