• CSS+DIV定位分析(relative,absolute,static,fixed)


    各个属性值的定义:

    1、static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

    2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。

    3、absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

    4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。

    relative与absolute的主要区别:

    首先,是上面已经提到过的在正常流中的位置存在与否。

    其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3

    图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:

     

    CSS+DIV定位分析(relative,absolute,static,fixed) - 心碎乌托邦 - love_heartbreaking

     

    可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。

    因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:

    CSS+DIV定位分析(relative,absolute,static,fixed) - 心碎乌托邦 - love_heartbreaking

     

    除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。

  • 相关阅读:
    itext操作PDF文件添加水印
    【PDF单页转化为图片输出 注意:英文或图片类的PDF可转化,中文抛异常】
    【使用Itext处理PDF文档(新建PDF文件、修改PDF文件、PDF中插入图片、将PDF文件转换为图片)】
    Itext简绍及操作PDF文件
    【将txt文本转图片】
    通用缓存组件
    一个简易的、轻量级的方法并行执行线程辅助类
    学习笔记 android fragment
    某队列积压问题分析、解决
    平衡
  • 原文地址:https://www.cnblogs.com/liaojie970/p/7002635.html
Copyright © 2020-2023  润新知