关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解。以下说说个人的理解:

语法:

position: relative | absolute

relative:
对象遵循常规流,而且參照自身在常规流中的位置通过toprightbottomleft属性进行偏移时不影响常规流中的不论什么元素。
absolute:
对象脱离常规流。使用toprightbottomleft等属性进行绝对定位。盒子的偏移位置不影响常规流中的不论什么元素,其margin不与其它不论什么margin折叠。

说明:

当设定position: relative时,是相对于自己来定位。(即相当于当前位置移动)

当设定position: absolute时,是相对于父级来定位的,没有父级相对于body定位。

备注:position: absolute时。leftrighttopbottom至少指定其一,对象可层叠。层叠通过z-index属性定义。

position: relative时对象不可层叠

css position: relative,absolute具体解释的更多相关文章

  1. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  2. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

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

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

  4. CSS 定位 relative && absolute 问题?

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  5. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  6. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

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

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

  8. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  9. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

随机推荐

  1. vs2010 编译多个project问题

    使用VS2010 编译从vc6.0复制过来的原project文件源代码.提示错误非常多.感觉无从下手.非常多原始的函数和API參数都提示类型 错误或者不兼容. 百度一下.第一个问题: vc6.0使用A ...

  2. sql取随机结果集

    应用场景: 某日,接产品姐姐需求,网站搜索页在搜索特定的内容时候,会现实搜索不到结果!如衣服网站,搜索鞋子等.为了不直接呈现一个赤裸裸的无此商品页面,so,需要在搜索商品件数小于3时,在下面随机推荐本 ...

  3. EffectiveJava(20)使用子类型化优化标签类

    标签类:其中有许多样板代码,包括枚举声明,标签域和条件语句 如果要给它添加风格,除了有权限修改源码之外,你还得给每个条件语句都添加一个条件,否则就会在运行时失败 标签类过于冗长,容易出错,并且效率低下 ...

  4. Oracle学习——扫盲篇

    前言 近期这几天一直在与Oracle数据库打交道.因为之前对Oracle的学习并不深入,仅仅是把Oracle当成一个数据源去使用.非常多东西了解的不是非常深,比方.数据库.数据库实例.表空间.用户.表 ...

  5. react-native 组件默认属性(defaultProps) 及 属性类型验证(PropTypes)

    1.所有的属性类型 2.代码 import PropTypes from 'prop-types'; type Props = {}; export default class App extends ...

  6. c语言用rand() 函数,实现random(int m)

    函数rand()是真正的随机数生成器.而srand()会设置供rand()使用的随机数种子. 假设你在第一次调用rand()之前没有调用srand(),那么系统会为你自己主动调用srand(). 注意 ...

  7. cocos2d-x 3.0 场景切换特效汇总

    cocos2d-x 3.0中场景切换特效比較多,并且游戏开发中也常常须要用到这些特效.来使场景切换时不至于那么干巴,遂这里汇总一下,开发中使用. 场景切换用到导演类Directory,大多数用的都是替 ...

  8. LinkedHashMap的实现讲解

    http://www.cnblogs.com/hubingxu/archive/2012/02/21/2361281.html LinkedHashMap 是HashMap的一个子类,保存了记录的插入 ...

  9. MySQL 数据库备份种类以及经常使用备份工具汇总

    mysql> flush tables with read lock; Query OK, 0 rows affected (0.00 sec) mysql> show master st ...

  10. [译]GLUT教程 - 位图和正交投影视图

    Lighthouse3d.com >> GLUT Tutorial >> Fonts >> Bitmap Fonts and Orthogonal Projecti ...