今天学习之前剩下的一个问题:CSS的position属性。首先归纳出和position相关的问题:

  1. position作为一个属性,它一共有哪几个属性值?
  2. position常用的属性值有哪几个?分别有什么特点?

第一个问题:position作为一个属性,它一共有哪几个属性值? 

  对于position属性,他一共有5个值,分别是

  1. static:默认值。没有定位,元素出现在正常的流中。
  2. relative:生成相对定位的元素,相对于其正常位置进行定位。正常位置也就是指如果没有position属性它会出现的位置。
  3. absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。这里需要注意一下,absolute的参照对象是第一个拥有非static的position属性的父级元素,后面会详细解释。
  4. fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
  5. 规定应该从父元素继承 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属性的学习的更多相关文章

  1. css布局学习笔记之position属性

    position属性用于定位元素,它的几个值分别如下: 1,static static 是默认值.任意 position: static; 的元素不会被特殊的定位.一个 static 元素表示它不会被 ...

  2. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  3. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  4. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  5. WPF 学习笔记-设置属性使窗口不可改变大小

    原文:WPF 学习笔记-设置属性使窗口不可改变大小 调整Windows下的ResizeMode属性: ResizeMode = NoResize Resize属性是控制Windows是否可以改变大小, ...

  6. 【学习笔记】jQuery的基础学习

    [学习笔记]jQuery的基础学习 新建 模板 小书匠  什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...

  7. 【学习笔记】JavaScript的基础学习

    [学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...

  8. 《Java学习笔记(第8版)》学习指导

    <Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...

  9. Hadoop学习笔记(10) ——搭建源码学习环境

    Hadoop学习笔记(10) ——搭建源码学习环境 上一章中,我们对整个hadoop的目录及源码目录有了一个初步的了解,接下来计划深入学习一下这头神象作品了.但是看代码用什么,难不成gedit?,单步 ...

随机推荐

  1. 在Windows下用MingW 4.5.2编译live555

    1.下载live555(http://www.live555.com/liveMedia/public/),解压. 2.进入MingW Shell,输入cd: F:/Qt/live(假定解压到F:/Q ...

  2. Linux中的时间和时间管理

    Coordinated Universal Time(UTC):协调世界时,又称为世界标准时间,也就是大家所熟知的格林威治标准时间(Greenwich Mean Time,GMT).比如,中国内地的时 ...

  3. 我爱工程化 之 gulp 使用(二)

    上一篇  介绍了gulp的安装.环境等配置.基本使用,那么现在,我们快走进 速8,深入了解吧...... 一.各种安装.环境配置.插件安装(参考上一篇文章) 二.项目基本目录结构 三.编写 gulpf ...

  4. C# WinForm实现控件拖动实例介绍

    主要是设计控件的MouseDown.MouseLeave.MouseMove事件.一步步来吧:1.定义一个枚举类型,描述光标状态 private enum EnumMousePointPosition ...

  5. HTML5元素拖拽实现示例

    HTML5现在前端圈中,已然成为一个不那么新的技术词汇了,很多公司也把HTML5也当成了硬性的技能要求,但是很多前端恐怕都不了解HTML5的拖拽怎么实现吧. 看了下极客学院的视频,大概的了解了下思路. ...

  6. lispbox 安装运行.sh的时候出现 lispbox.sh: 2: lispbox.sh: Bad substitution

    安装lispbox时使用tar命令将压缩文件解压之后cd进入之后在运行.sh文件时出现了如下情况. $ sh lispbox.sh lispbox.: lispbox.sh: Bad substitu ...

  7. python 生成排列、组合以及选择

    from <python cookbook> 19.15 任务 需要对一个序列的排列(permutation).组合(combination)或选择(selection)进行迭代操作.即使 ...

  8. 产生一个长度为100的int数组,并向其中随机插入1-100,不能重复

    ]; ArrayList myList=new ArrayList(); Random rnd=new Random(); ) { ,); if(!myList.Contains(num)) myLi ...

  9. poj 3373 Changing Digits (DFS + 记忆化剪枝+鸽巢原理思想)

    http://poj.org/problem?id=3373 Changing Digits Time Limit: 3000MS   Memory Limit: 65536K Total Submi ...

  10. MongoDB 覆盖索引查询

    MongoDB 覆盖索引查询 官方的MongoDB的文档中说明,覆盖查询是以下的查询: 所有的查询字段是索引的一部分 所有的查询返回字段在同一个索引中 由于所有出现在查询中的字段是索引的一部分, Mo ...