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. CSS常见BUG

    CSS Hack IE条件注释: 所有IE:<!--[if IE]> css code <![endif]--> IE6以上:<!--[if gt IE 6]> c ...

  2. WordPress插件制作教程(二): 编写一个简单的插件

    上一篇说到了如何创建一个插件,我想大家看了之后一定会有所收获,这一篇简单给大家写一个插件样例,让大家有一个基本的印象.这个插件的样例就是当你激活这个插件后会在你的每篇文章中插入一段自己定义好的内容,比 ...

  3. python文件_写入

    1.输入的数据写入到一个文本: #这个写入操作不会将原来的数据覆盖掉 n=raw_input('请输入写入的文件数据:') fl2=open('g:/2.txt','a') fl2.write('\n ...

  4. Effective Java实作Comparable - 就是爱Java

    当集合或数组内的对象需要排序时,会利用Collections.sort或Arrays.sort来进行排序,通常会implement Comparable,来实现自定义排序,透过回传值来表示排序的大小. ...

  5. Codeforces 358D Dima and Hares

    http://codeforces.com/contest/358/problem/D 题意:给出n个数,每个数取走的贡献与相邻的数有关,如果取这个数的时候,左右的数都还没被取,那么权值为a,如果左右 ...

  6. HDU 3507 PrintArticle (单调队列优化)

    题意:给出一个数列C,一个数字M,将数列分成若干段,每段的代价为(设这段的数字为k个): dp[i]=min(dp[j]+(sum[i]-sum[j])*(sum[i]-sum[j])+M) 若j1& ...

  7. Keil "RECURSIVE CALL TO SEGMENT"彻底解决

    我们在做菜单程序或通过函数指针调用函数时,如果被调用的函数中有包含了常量字符串,那么经常会出现这样的的错误提示:"RECURSIVE CALL TO SEGMENT"意思是&quo ...

  8. bzoj1734 [Usaco2005 feb]Aggressive cows 愤怒的牛

    Description Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The stal ...

  9. C++中初始化和定义对象的语法,带括号与不带括号的区别

    小记:运行环境:win xp  vs2008 #include <iostream>#include <string> using std::cout;using std::c ...

  10. 修改Fedora 20 启动项

    在Fedora 20里面,Fedora 使用了systemd作为系统与服务的管理工具,这个守护进程是系统开机后第一个开启的进程,pid 为1.systemd扮演着初始化系统的角色,主要用于开启与维护系 ...