position属性用于定位元素,它的几个值分别如下:

1,static

  static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”,一个 position 属性被设置为其他值的元素表示它会被“positioned”

2,relative

  relative 相对于自己在文档流中本来的位置进行定位,设置toprightbottomleft 属性会使其偏离其正常位置。不脱离文档流,其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

3,fixed

  一个固定定位(position属性的值为fixed)元素会相对于视窗来定位,这意味着即便页面滚动,它还是会停留在相同的位置。和 relative 一样, toprightbottomleft 属性都可用。脱离文档流,不会保留它原本在页面应有的空隙。

4,absolute

  absolutefixed 的表现类似,除了它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位(position属性的值为absolute)的元素没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。

  多个同级absolute元素会重叠在一起,重叠是按代码本身顺序排列,越后输入的其越靠前(浮在上面)。除非元素设置了z-index属性,z-index属性值越大越靠前。

这些都是理论知识,加上一点小练习就能够理解,但是具体的用处,还有待多看多练。做个小小的笔记,记录自己的学习。

css布局学习笔记之position属性的更多相关文章

  1. CSS布局学习笔记之position

    CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一 ...

  2. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  3. css布局学习笔记之box-sizing

    当你设置了元素的宽度,实际展现的元素却能够超出你的设置:因为元素的边框和内边距会撑开元素. .div{ width: 500px; margin: 20px auto; padding: 50px; ...

  4. css布局学习笔记之max-width

    设置块级元素的 width 可以阻止它从左到右撑满容器.然后你就可以设置左右外边距为 auto 来使其水平居中.元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距. div{ width ...

  5. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  6. CSS布局 ——从display,position, float属性谈起(转)

    CSS布局 ——从display,position, float属性谈起   页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了 ...

  7. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. (2)《Head First HTML与CSS》学习笔记---img与基于标准的HTML5

    1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...

  9. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

随机推荐

  1. 运行一个Hadoop Job所需要指定的属性

    1.设置job的基础属性 Job job = new Job(); job.setJarByClass(***.class); job.setJobName("job name") ...

  2. C# txt文件读写

    //读取文件内容 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出. ]; ]; public void Read() { try { FileStream fil ...

  3. AngularJS中ng-options简单用法及预选项失败的原因

    刚刚接触AngularJs,记录一下ng-options的使用. 1.构造key-value数据 $scope.types = [ {id:"1",type:"AA&qu ...

  4. Android开源框架之SwipeListView导入及模拟QQ侧滑

    SwipeListView是Github上的一个开源框架,地址:https://github.com/47deg/android-swipelistview SwipeListView was bor ...

  5. 前端面试题之js篇

    前端面试也可为是鱼龙混杂,各公司面试题的种类也大不相同,有的公司注重基础语法,面试题偏于ES,有的公司偏于页面逻辑,会考差一些js的应用,现将遇到过的题和典型的题整理一下. 1. 0.2-0.1 == ...

  6. Android SDCard和内部存储中gcc编译后的可执行文件无法运行提示 cannot execute - Permission denied

    原因是mount的方式问题,root后运行 su mount -o rw,remount /mnt/sdcard   //SDCard mount -o rw,remount /mnt/interna ...

  7. 执行yiic webapp命令时报错:php.exe不是内部或外部命令,也不是可运行的程序

    在执行 yiic webapp ../abc 命令时报错: “php.exe”不是内部或外部命令,也不是可运行的程序 或批处理文件. 这是因为yiic批处理程序找不到php.exe的执行路径引起的. ...

  8. 关于GC的意见

    转载:http://tieba.baidu.com/p/3171732371?pid=53949564351&cid=#53949564351 0.这里的GC是指“垃圾回收”(garbage ...

  9. HMVC

    HMVC(Hierarchical-Model-View-Controller),也可以叫做 Layered MVC.顾名思义,就是按等级划分的 MVC 模式,简单的解释就是把MVC又细分成了多个子 ...

  10. 修改和获取web.config或app.config文件appSettings配置节中的Add里的value属性 函数

    1: /// <summary> 2: /// 修改web.config或app.config文件appSettings配置节中的Add里的value属性 3: /// </summ ...