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. smarty 常用参数

    section的产生是为解决foreach的不足的,与foreach一样,它用于设计模板内的循环块,它较为复杂,可极大程序上满足程序需要,所以在程序中我习惯使用它而不使用foreach,基本原形为:{ ...

  2. 使用 PHP 读取文本(TXT)文件 并分页显示

    <?php //----------------you should save this file as m.php---------------- session_start(); if (e ...

  3. 简单说pyglet.event

    emitter,就是pyglet.event.EventDispatcher的子类, 负责发出事件的消息,并且规定了响应消息的函数名. class Consumer(pyglet.event.Even ...

  4. Constructing Roads In JGShining's Kingdom(HDU 1025 LIS nlogn方法)

    Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65 ...

  5. easy ui 实现gridview效果

    前台: // 加载审批步骤列表 function FillStep(flowID) { $('#tbStepList').datagrid({ url: "/System/ApproverS ...

  6. C语言编程时常犯十八个错误

    C语言的最大特点是:功能强.使用方便灵活.C编译的程序对语法检查并不象其它高级语言那么严格,这就给编程人员留下“灵活的余地”,但还是由于这个灵活给程序的调试带来了许多不便,尤其对初学C语言的人来说,经 ...

  7. Factorials 阶乘

    Description N的阶乘写作N!表示小于等于N的所有正整数的乘积.阶乘会很快的变大,如13!就必须用32位整数类型来存储,70!即使用浮点数也存不下了.你的任务是找到阶乘最后面的非零位.举个例 ...

  8. VMdomainXml

    1,One,Euc,Ostack 虚拟磁盘镜像制作方法[Windows,Linux,类linux OS](1,基于ios部署系统生成img,2基于vm xml定义部署系统生成img qcow2) 如需 ...

  9. python3-day2(基本回顾)

    1.作用域 1>外层变量可以被内层变更使用 2>内层变更不可以被外层使用 global nonlocal 2.对于Python,一切事物都是对象,对象基于类创建 3.练习 有如下值集合 [ ...

  10. UITableView使用总结和性能优化

    UITableView使用总结和性能优化    UITableView有两种风格:UITableViewStylePlain和UITableViewStyleGrouped.如 果我们查看UITabl ...