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. MVC过滤器详解和示例

    原文  http://blog.csdn.net/ankeyuan/article/details/29624005 MVC过滤器一共分为四个:ActionFilter(方法过滤器),ResultFi ...

  2. hibernate+spring+mvc+Easyui框架模式下使用grid++report的总结

    最近刚开始接触hibernate+spring+mvc+Easyui框架,也是刚开通了博客,希望能记录一下自己实践出来的东西,让其他人少走弯路. 转让正题,以个人浅薄的认识hibernate对于开发人 ...

  3. Java笔记--java一行一行写入或读取数据

    转自 Ruthless java一行一行写入或读取数据 链接:http://www.cnblogs.com/linjiqin/archive/2011/03/23/1992250.html 假如E:/ ...

  4. linq学习三个实例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 使用opencv传中文文件崩溃

    这个问题经过我的调试发现:   程序是在 while (*at && !isdigit(*at)) at++;   这个语句时crash的,但是跟进去是isdigit的问题,因为变量a ...

  6. C# 判断两个日期是否是同一天

    System.Data.Entity.DbFunctions.DiffDays(cs.StartTime.Value,DateTime.Now) == 0//只获取当天 OR XX.StartTime ...

  7. 高精度快速幂(Java版)

    import java.io.*; import java.math.*; import java.util.*; import java.text.*; public class Main { pu ...

  8. 团队介绍 | 魅动 Magic Motion

    团队介绍 | 魅动 Magic Motion 魅动 Magic Motion 是专注于研发.设计和生产智能化私密生活用品的创新品牌.魅动 Magic Motion 将无线移动通信技术与私密生活产品相结 ...

  9. HTTP缓存 1.0 vs 1.1

    在“使用ETag跟踪用户”中有一点被忽略了,因为要用这张小图统计统计uv, 所以要求浏览器必须每次都要发送这个图片的请求.这需要服务器对图片的缓存策略做设置. http/1.0 和 http/1.1 ...

  10. MFC调用c#的dll

    一.使用 /clr 编译 MFC 可执行文件或规则 DLL 1.打开“项目属性”对话框,方法是右键单击“解决方案资源管理器”中的项目并选择“属性”. 2.展开“配置属性”旁边的节点并选择“常规”.在右 ...