• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    燕赵风采20选5最新开奖:transform改变定位元素的包含块

    燕赵风采20选5走势图 www.fllv.net 2018-11-29 00:23| 作者: admin| 查看: 793| 评论: 0|来自: 蚂蚁部落

    css3之前绝对定位元素的包含块规则可以参阅以下两篇文章:

    (1).CSS absolute绝对定位一章节。

    (2).CSS fixed固定定位一章节。

    特别说明:一个元素会根据矩形盒计算自身定位和大小,此矩形盒就是包含块。

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <title>蚂蚁部落</title>
    <style>
    #relative {
      position: relative;
      width: 100px;
      height: 100px;
      background: green;
    }
    #absolute {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 0;
      right: 0;
      background: blue;
    }
    #transform {
      background: red;
      width: 50px;
      height: 50px;
    }
    </style>
    </head>
    <body>
      <div id="relative">
        <div id="transform">
          <div id="absolute"></div>
        </div>
      </div>
    </body>
    </html>

    上面的代码中,绝对定位的div元素是以外层相对定位的元素(准确的说是产生的包含块)为参考对象的。

    再来看一段代码实例:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <title>蚂蚁部落</title>
    <style>
    #relative {
      position: relative;
      width: 100px;
      height: 100px;
      background: green;
    }
    #absolute {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 0;
      right: 0;
      background: blue;
    }
    #transform {
      background: red;
      width: 50px;
      height: 50px;
    }
    #transform {
      transform: scale(1);
    }
    </style>
    </head>
    <body>
      <div id="relative">
        <div id="transform">
          <div id="absolute"></div>
        </div>
      </div>
    </body>
    </html>

    上面的代码为中间的div元素应用如下代码:

    [CSS] 纯文本查看 复制代码
    transform: scale(1);

    所以内部绝对定位的div元素就会以中间的div元素为参考对象;对position:fixed定位也是同样的道理。

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 重庆时时彩真的么 任选9场历史奖金表 北京赛车pk10程序源码 159彩票网 3d基本走势图表 生肖时时彩玩法规则 香港赛马会官方网站 福彩欢乐生肖玩法 百家乐网站 彩票论坛 pk10牛牛软件 北京赛车pk拾开奖现场 3d彩票走势图下载 14027期七星彩走势图 黑龙江时时彩20选5走势 2017131期福利彩票开奖结果