• 绝对定位和相对定位


    position 属性规定元素的定位类型。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

    position:relative | absolute | fixed | static | inherit

    1.static 为默认值,无特殊定位,按照正常的文档流进行排列。

    注意:当position为static时,定义top,left,bottom,right是不起作用的。

    2.absolute 对象将脱离文档流,不再占据元素在文档中的正常位置。它的偏移位置是以最近已定位的祖先元素作为参照,如果没有已定位的祖先元素,则以顶级元素作为参照。

    3.relative 元素不会脱离文档流,仍然占据原来的空间,它的偏移位置会以自身的占位空间作为参照。可以通过设置margin-top、margin-bottom为负值,来改变它在占位空间中的高度。

    3. fixed 是特殊的absolute,会脱离文档流,总是以body为定位对象的,按照浏览器的窗口进行定位。

    绝对定位——元素会脱离文档流,它的偏移位置是以最近已定位的祖先元素作为参照,如果没有已定位的祖先元素,则以顶级元素作为参照。可以通过index来控制层级。

    相对定位——元素不会脱离文档流,仍然占据原来的空间,它的偏移位置会以自身的占位空间作为参照。可以通过设置margin-top、margin-bottom为负值,来改变它在占位空间中的高度。

    小结

    1.一般父级元素使用相对定位,子级元素使用绝对定位。

    2.对于相对定位元素,left、right、top、bottom属性与margin属性混合使用会产生累加效果。

    3.对于绝对定位元素,left、right、top、bottom属性与margin属性混合使用,偏移方向相同累加,方向相反margin值无效。

    4.对于绝对定位元素,使用margin值进行布局时,不管它有没有已经定位的祖先元素,都会以它原来所在文档流中的位置作为参照。此时margin-top、margin-bottom不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。

    5.对于绝对定位元素和浮动元素,设置display:inline/block均无效,因为此时元素默认以display:inline-block显示。

  • 相关阅读:
    ue4 Windows RawInput Plugin
    UE4 VR中一种比较清晰的UI制作方式
    C# 自定义特性及反射
    C# 委托
    java+orace+hql分页
    数据库小知识总结
    往oracle数据库表中插入五十万条数据
    jsp页面传到action乱码问题
    常见数据库对象与java.sql.Types对照
    Oracle数据库初探
  • 原文地址:https://www.cnblogs.com/wqhwe/p/4029686.html
Copyright © 2020-2023  润新知