• CSS进阶(九) position:absolute


    特性

    (1)块状化,display渲染为block或table

    (2)文档流破坏性

    (3)包裹性

    (4)块状格式化上下文,也就是BFC,absolute 的自适应性最大宽度往往不是由父元素决定的

    absolute元素包含块和常规元素的差异

    (1)边界是 padding box 而不是 content box。

    (2)内联元素也可以作为“包含块”所在的元素

    (3)“包含块”所在的元素不是父块级元素,而是最近的 position 不为 static 的祖先 元素或根元素

    绝对元素的计算和定位是相对于祖先元素的padding-box

    absolute 是非常独立的 CSS 属性值,其样式和行为表现不依赖其他 任何 CSS 属性就可以完成

    因为“无依赖绝对定位”的图标是自动跟在文字 后面显示的

    无依赖绝对定位的相对元素是绝对定位元素相对的前一个元素

    与overflow的关系

    如果 overflow 不是定位元素,同时绝对定位元素和 overflow 容器之间也没有定位元素,则 overflow 无法对 absolute 元素进行剪裁

    与clip的关系

    clip 属性要想起作用,元素必须是absolutr或者是fixed

    clip 隐藏仅仅是决定了哪部分是可见的,非可见部分无法响应点击事件 等;然后,虽然视觉上隐藏,但是元素的尺寸依然是原本的尺寸

    与top/right/bottom/left的关系

    同时具有两个方向的属性才是真正的绝对定位

    只具有一个方向的属性时,另一个方向相对定位

    流体特性

    绝对定位元素在不设置方向属性时,展现为包裹性,在设置了对立方向的属性时,展现为与div类似的流体特性。其宽度自适应父容器的padding-box。

    与margin:auto的关系

    可以使用流体特性配合margin:auto实现绝对定位元素的居中

  • 相关阅读:
    QString::toStdString() crashes
    Consolas 字体
    Mesh BRep Shapes
    PyOpenCL库安装
    全国精确到乡镇的行政边界、路网水系建筑poi等矢量shp免费下载
    DEM数据(ASTER GDEM|SRTM|GLS2005|ALOS DEM)下载
    IDL基础
    辐射定标与FLAASH大气校正
    Circos绘图—基础
    R-散点密度图
  • 原文地址:https://www.cnblogs.com/goOtter/p/9803525.html
Copyright © 2020-2023  润新知