在 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. 1.4 配置备份策略(Policy)

    1.1 配置备份策略(Policy) 一个备份策略由四部分组成. Attributes(属性) Policy是否Active Policy类型 由此Policy产生的任务的优先级 使用的Storage ...

  2. 抽象类和final

    抽象类: 概念:在继承过程中,形成一个继承金字塔,位于金字塔底部的类越来越具体(强大),位于塔顶的越来越抽象(简单). 关键字  :abstract 抽象类特性: [1]抽象类过于抽象,实例化后无语义 ...

  3. 2295: KMP模式匹配 一(串)

    2295: KMP模式匹配 一(串) 时间限制: 1 Sec  内存限制: 128 MB提交: 210  解决: 97[提交][状态][讨论版][命题人:外部导入] 题目描述 求子串的next值,用n ...

  4. 软件架构中的SOA架构有哪些特点?

    面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来.构建在各种各样的系统中的服务可以以一种统一和通用的方式进行交互. SOA是一 ...

  5. 2017.10.25 Java List /ArrayList 三种遍历方法

    java list三种遍历方法性能比较 学习java语言list遍历的三种方法,顺便测试各种遍历方法的性能,测试方法为在ArrayList中插入记录,然后遍历ArrayList,测试代码如下: pac ...

  6. linux中CURL的安装

    curl是一款著名的字符界面下的下载工具,支持HTTP.HTTPS.FTP.FTPS.DICT.TELNET.LDAP.FILE,和GOPHER.此外还具有cookies支持.断点续传.FTP上传.密 ...

  7. python 添加 threadpool

    操作系统: Ubuntu 10.04 python安装依赖的软件包: python 出现 ImportError: No module named ** 我这里出现了: ImportError: No ...

  8. PHP调试小错误汇总

    1.中文显示乱码 解决:加上header('Content-type:text'); 2.Unable to find the wrapper "https 解决:到php.ini中把ext ...

  9. 《Linux就该这么学》,刘小伙实在人,给打个广告

    本书是由全国多名红帽架构师(RHCA)基于最新Linux系统共同编写的高质量Linux技术自学教程,极其适合用于Linux技术入门教程或讲课辅助教材,目前是国内最值得去读的Linux教材,也是最有价值 ...

  10. Windows Server 2012 搭建DHCP及远程路由访问

    1.1    基础环境信息 1.2    DHCP与远程访问服务器角色安装 1.服务器管理器—>仪表板—>添加角色和功能,出现添加角色和功能向导,点击下一步 2.选择安装类型为基于角色或基 ...