Relative: 属于文档流,针对自身进行偏移;

Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移;

Fixed: 和absolute基本一致,唯一不同是,fixed针对视口进行偏移;

Sticky: 可以看作是相对定位和固定定位和混合体。这里有一个阀值的概念(使用top right bottom left)进行定义,超过阀值之前是相对定位,超过阀值之后是固定定位。

CSS - position属性小结的更多相关文章

  1. 【转载】CSS position属性和实例应用

    目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...

  2. 详解CSS position属性

    原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...

  3. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  4. CSS position 属性

    position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...

  5. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  6. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  7. css position属性

    absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...

  8. CSS position属性 标签: css 2016-09-06 15:58 78人阅读 评论(0) 收藏

    踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...

  9. CSS position属性---absolute与relative

    详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html

随机推荐

  1. hrbust1444 逃脱 【BFS】

    Description  这是mengxiang000和Tabris来到幼儿园的第四天,幼儿园老师在值班的时候突然发现幼儿园某处发生火灾,而且火势蔓延极快,老师在第一时间就发出了警报,位于幼儿园某处的 ...

  2. Android NDK开发指南(二)Android.mk文件

    http://www.cnblogs.com/yaozhongxiao/archive/2012/03/06/2382225.html 1.  概述 Android.mk文件是用来描述build sy ...

  3. 跳跃表&hash

    汇编刚学跳跃表,发现跳跃表与hash有着数不清的关系 维基百科: 哈希表(哈希映射)是实现关联数组抽象数据类型的数据结构,该结构可以将键映射到值.哈希表使用哈希函数来计算桶或槽阵列的索引,从中可以找到 ...

  4. 51Nod 1127 最短的包含字符串 (尺取法)

    #include <iostream> #include <algorithm> #include <string> #include <cstring> ...

  5. python 对mongdb的简单操作

    准备工作:1.选择安装合适的mongodb到本地电脑,2.创建mongodb实例,3,开启mongodb实例,4,下载pymongo第三方库,5.下载pycharm对mongodb可视化支持的插件mo ...

  6. Qt 2D绘图之二:抗锯齿渲染和坐标系统

    一.抗锯齿渲染 1.1 逻辑绘图 图形基元的大小(宽度和高度)始终与其数学模型相对应,下图示意了忽略其渲染时使用的画笔的宽度的样子. 1.2 物理绘图(默认情况) 在默认的情况下,绘制会产生锯齿,并且 ...

  7. [译]Understanding ECMAScript 6 说明

    说明 JavaScript核心语言功能定义在ECMA-262中,此标准定义的语言是ECMAScript,浏览器中的JavaScript和Node.js环境是它的超级.当浏览器与Node.js想要通过额 ...

  8. MyBatis框架的XML数据访问Dao层接口的组合使用

    MyBatis 的前生为Apache的开源项目iBatis.其优势在于灵活,几乎可以替代JDBC,同时提供了编程接口.目前MyBatis的数据访问Dao层不需要实现类,也不需要像JDBC那样拼接Hql ...

  9. bootstrap警告框、进度条和列表组

    警告框   <div class="container">      <div class="alert alert-success" rol ...

  10. GIMP 无法设置中文的问题解决

    首先按照网上说的安装了language-pack-gnome-zh-hant 参考链接:http://www.ubuntu-tw.org/modules/newbb/viewtopic.php?top ...