• Position详解---转


    position有四个属性值:

    1. relative
    2. absolute
    3. fixed
    4. static

    下面分别讲述这四个属性。

    1. relative

    relative属性,相对定位,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。relative的偏移是基于对象的margin的左上侧的。但是这货又比margin更为强大,如果单独使用这个属性的时候,一般情况下,你可以把这货看成是全能的margin,因为它可以在display:inline的时候起作用,这点上margin值的上下边距就不起作用了,当然margin负值的某些应用用这个属性就实现不了了。比如,子级的margin负值可以减小display:inline-block父级的宽度,从而实现类似圆角的自适应按钮。如图:

     

    而这个时候relative就无法替代margin了。所以说它一般的单独使用的时候是更强大的margin,当然这个货有其他组合的应用。


    2. absolute

    这个属性是一个强大的魔鬼。当设置元素的属性为absolute时,这个元素就飘起来了。脱离了文档流,尼玛呀,又是这货,看到”文档流“,我猜大部分人都不是很明白这诡异的东西,那么下面,我就来点干货,解释下文档流,已经了然于胸的大神请略过这段。

    文档流(普通流):

    将窗体自上而下分成一行行,并在每一行中按从左到右的顺序排放元素,即为文档流。

    有三种情况将使得元素脱离文档流,分别是浮动(float left or right)、绝对定位(position:absolute)、固定定位(position:fixed)。其中浮动引起的脱离文档流和定位引起的表现上又有所不同。关于这点不同,那就有待读者自行码demo了。

    当元素的position设置为absolute后,元素将怎样进行偏移呢?这里分为两种情况:

    (1) 当元素的父级(也可以是爷爷,或者是爷爷的爷爷)设置了position属性,且position的属性值为absolute或者relative时,这个时候,元素将按照这个父级来进行定位。
    对象虽然确定好了,但有些地方需要思考,如果父级设定了 margin,border,padding等属性,那么这个定位点将从哪里开始呢?答案是从padding开始


    (2) 如果元素的父级不存在一个有着position属性值为absolute或者relative的对象时,那么那就会以body为定位对象,这个比较容易理解。

    3. fixed

    fixed是相对于可视区域进行偏移的,不管你是不是拖动浏览器的滚动条,不管它的父级是谁,是天王老子,它都不会鸟你,如果不明白,请自行码demo,哦,one more thing:IE6这家伙是不支持的。如果要事先IE6 fixed的效果,可以用css表达式来解决这个问题。如图:




    4. static

    position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

  • 相关阅读:
    好的开源项目汇总
    强制SVN上传代码时添加日志
    微信开发-回调模式
    Struct2中自定义的Filter无效
    Ajax 传包含集合的JSON
    PostgreSQL数据库PL/PGSQL学习使用
    单用户对比PG 9.5.4和SYBASE 15.7对超大表的操作性能
    一场一波三折的SQL优化经历
    聚簇索引对数据插入的影响
    磁盘IO初探
  • 原文地址:https://www.cnblogs.com/freefish12/p/4435590.html
Copyright © 2020-2023  润新知