在 css中, position 属性有四个值可用: static(默认值)、absolute、relative、fixed。

  relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留自身原始的位置)

  absolute:

    1、相对于自身的包含块定位;
    2、寻找包含块的规则:从自身网上寻找祖先元素,寻找到的第一个position为非static修饰的祖先元 素的内边距边界 就是当前绝对定位元素的包含块;如果没有的话,则相对于 html进行定位;
    3、完全脱离文档流;
    4、display的取值类似于inline-block;
    5、不缩短行框

  fixed:

    完全脱离文档流,和 absolute 的唯一的区别就在于:absolute元素是根据最近的定位上下文确定位置,而fixed永远根据浏览器确定位置。即使窗口是滚动的它也不会移动 

  说到 position,就要再说一下 [Z-index] (垂直定位)

  Z-index 默认值为0;这种情况下,后者会覆盖前者,需要改变元素之间层级关系的话,就要通过改变 Z-index 值来实现了,Z-index值越大优先级就越高。

浅谈 css 之 position用法的更多相关文章

  1. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  2. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  3. [浅谈CSS核心概念] CSS布局模型:float和position

    1.流动模型 HTML元素在默认情况下都是按照"流动模型"进行布局的,网上也有人称之为"普通流"."文档流"之类的.这种布局模式的特点在于: ...

  4. 浅谈CSS模块化

    为什么要CSS模块化? 你是否为class命名而感到苦恼? 你是否有怕跟别人使用同样class名而感到担忧? 你是否因层级结构不清晰而感到烦躁? 你是否因代码难以复用而感到不爽? 你是否因为commo ...

  5. 浅谈css中的position

    什么是position,根据css 2.1中的描述,position和float的值决定了浏览器要采用那种定位算法来计算元素盒子的具体位置.先避开float不谈,本文主要介绍position属性的不同 ...

  6. 浅谈css中的position属性

    我觉得吧,css如果不考虑浏览器的兼容问题的话,最让人头疼的应该就是position了,反正我是这么觉得的,为了能基本上搞清楚position的几种情况,我找了一些资料,做了一个小实验,下面是实验的过 ...

  7. 浅谈css常用伪类用法

    着重写一下after和before的用法: css样式搞定:标签元素+伪类after a.'class名':after{//我的样式名称是这个,可以写成你自己的样式名称 content: '已打包'; ...

  8. 浅谈css中的盒模型(框模型)

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  9. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

随机推荐

  1. 两次DFS,POJ(1481)

    题目链接:http://poj.org/problem?id=1481 两次DFS,这里的思路是,没找到*,就说明,有一个骰子,因此,每搜索到一个*,深搜4个方向,并且变为'.',要是搜到'X',就是 ...

  2. VPS一键测试脚本 / 自带结果导出

    脚本命令 一下脚本可能卡住,运行时间长,建议在screen中运行. 1.秋水逸冰大佬的Bench.sh脚本 特点:用时较短,对系统测试全面,英文:但缺少国内节点测速 有趣的是,bench.sh既是脚本 ...

  3. redis 有序集合类型

  4. undefined reference to 'dlopen';undefined reference to 'dlclose';undefined reference to 'dlerror'等问题

    在linux下,编译链接的时候,经常会遇到这样一个问题,undefined reference to.....,引起这个问题的原因在于在链接的时候缺少选项.下面举几个例子,并给出解决办法. 1.  u ...

  5. 将base64编码转换图片

    /// <summary> /// 二进制Base64编码转图片 /// </summary> /// <param name="bytes"> ...

  6. base64模块的使用及python中的使用

    Base64是一种基于64个可打印字符来表示二进制数据的表示方法.由于2^=,所以每6个比特为一个单元,对应某个可打印字符.3个字节有24个比特,对应于4个Base64单元,即3个字节可由4个可打印字 ...

  7. JS常见内置对象和方法

    JS中常用的内置对象:Array对象.Date对象.正则表达式对象.string对象.Global对象  Array对象中常用方法: concat() 表示把几个数组合并成一个数组join()   设 ...

  8. 基于 win7下虚拟机的 GNSS-SDR安装过程

    最近在安装 GNSS-SDR软件时,遇到了很多问题,这里回顾了我的安装过程,罗列了所遇到的问题和解决办法.希望后来者不要再踩这些坑了! 首先,在官方文档中看到,GNSS-SDR目前并不支持直接在 Wi ...

  9. JavaScript数组常用的方法

    改变原数组: ※ push,pop,shif,unshift,sort,reverse ※ splice 不改变原数组: ※ concat,join→split,toString,slice push ...

  10. python -- sftp的方式下载终端文件

    可以通过paramiko模块进行远程连接,然后指定文件夹,进行下载. sf = paramiko.Transport((host, port)   #创建链接对象,需要终端ip以及sftp使用的端口号 ...