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?,单步 ...
随机推荐
- ubuntu lua安装
#解压 tar -xzvf lua5.2.2.tar.gz #进入lua5.2.2文件夹 cd lua5.2.2 #执行make sudo make linux #提示如下错误: #lua.c:67: ...
- VS2010类似Eclipse文件查找功能-定位到
快捷键:Ctrl + , 打开定位到窗口,可以在文件或类文件中查找内容.
- 让hyper-v调整console的大小
在hyper-v中centos的console一直都是1024x768的分辨率,后来找到一种修改分辨率的解决方法 grubby --update-kernel=ALL --args="vid ...
- 正确理解javascript的this关键字
javascript有this关键字,它和javascript的执行上下文有着密切的关系,就是说this具体指代什么要根据它的上下文来判断. 一.this和对象的关系 var Person={ ...
- jQuery 1.4.4 中 function( window, undefined ) 写法原因
读 jQuery 1.4.4 版本代码的时候,发现下面的写法: (function( window, undefined ) { ... // code goes here })(window); w ...
- java学习--抽象类与接口
一.抽象 在使用抽象类时需要注意几点: 1.抽象类不能被实例化,实例化的工作应该交由它的子类来完成,它只需要有一个引用即可. 2.抽象方法必须由子类来进行重写. 3.只要包含一个抽象方法的抽象类,该方 ...
- 使用grub硬盘重装ubuntu
电脑一直是双系统,Windows8 + Ubuntu13.04,昨天瞎搞,更新了一下QT,结果就不能开机了...真心难. 老系统坏了也好,正好可以装个Ubuntu14.04LTS.手边没有U盘,可以把 ...
- TCO 2014 Round 1A
顺利搞出 A B 两题,然后压线晋级了,手速场. A 题 , 求排列最小的,肯定从后往前来做,维护一个最小的set,只是第一个字母要特判一下. 1: #line 5 "EllysSorti ...
- 聊聊iOS开发中耳机的那点事(监听耳机拔插、耳机线控)-b
如果说一个项目出现的最重大的事故,那无疑就是开发人员使用了不可控的元素. 前言 iOS开发当中有关于视音频播放的开发不在少数,用户时常会使用到一种输出设备,那就是"耳机",这一篇博 ...
- winform 项目获取app.config 中appSettings节点数据
<?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...