专栏首页练小习的专栏可视化格式模型-绝对定位

可视化格式模型-绝对定位

相对包含块偏移定位 在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。 要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元素。那就显得矬了- -! 专业的说法,相对于包含快定位。所以,绝对定位元素的定位,关键是包含块

完全脱离常规流 它完全脱离了常规流(对后继的兄弟节点没有影响)。 这一点又与浮动元素不同,好歹浮动元素会对后继的行框产生影响,而且,后面声明的绝对定位元素也不会受前面定义的绝对元素的影响。 可以这么理解,常规流中的元素,都在同一个层上,浮动是处于常规流之上的一个特殊层,可能会对常规流中的元素有影响。但是绝对定位的元素不会,可以把每个绝对定位的框看做一个单独的图层,独来独往。所以,说它完全脱离了常规流也不无道理。 注意一点,绝对元素定位的 top 和 left 值跟绝对元素未脱离常规流之前在常规流中位置有关。

绝对定位元素生成的包含块 一个绝对定位框会为它的常规流子元素和定位派生元素(不包含 fiexed 定位的元素)生成一个新的包含块。不过,绝对定位元素的内容不会在其它框的周围排列。 至于,为何只为常规流中的子元素还有绝对定位元素生成包含块,就不大了解了……有知道的么?分享一下…… 注意,绝对定位框还会创建 block formatting contexts。在IE中则会触发 hasLayout 。

堆叠层次 它们可能会掩盖另一个框的内容,或者被另外一个框掩盖,这取决于互相重合的框的堆叠层次。 也就是我们前面说的三维的可视化模型,除了X轴,Y轴,还有Z轴。

固定定位(Fixed positioning)

固定定位是绝对定位的一个子类。唯一的区别是,对于固定定位框,它的包含块由可是窗口(viewport)创建。对于连续媒介,固定定位框并不随着文档的滚动而移动。从这个意义上说,它们类似于固定的背景图形。对于页面媒介,固定定位框在每页里重复。对于需要在每一页底部放置一个签名时,这个方法非常有用。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可视化格式模型-定位系统

    CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局。 常规流(Normal flow) 常规流,是对 normal flow的直译。...

    练小习
  • 关于IE6下绝对定位元素莫名消失的问题

    这是个很老的bug了,我想一般大家都遇到过,以前我是纯凭经验,让绝对定位的元素不挨着浮动元素就OK了,不过一直没去研究它形成的原因。今天做页面又遇到了这个可爱的...

    练小习
  • 移动端全兼容的flexbox速成班

    说起flexbox,都算是件陈年旧事了,它是2009年W3C提出的一种全新的可伸缩的CSS布局方式。依赖flexbox,我们可以更简单,高效的完成可伸缩式页面的...

    练小习
  • python中list的使用

    举例:listClassName = ['Jack','Tom','Mark']                   

    py3study
  • 不懂算法的程序员不是好工程师--选择排序

    其实有很多同学对于算法的时间复杂度有点模糊,分不清什么所谓的 O(n),O(nlogn),O(logn)...等,也许下图对一些人有一些更直观的认识。

    架构师修行之路
  • ORACLE 数据转换为MYSQL

    load data local infile \'文件名.txt\' into table 数据库表名  character set utf8 fields ...

    明哥的运维笔记
  • 用数据驱动进行精益创业实践[增长黑客]

    1),精益创业代表了一种不断形成创新的新方法,提倡企业进行“验证性学习”,先向时常推出极简的原型产品[MVP-minimum viableproduct],然后...

    辉哥
  • Single-Shot Refinement Neural Network for Object Detection

    对于目标检测,两阶段方法(如Faster R-CNN)的准确率最高,而单阶段方法(如SSD)的效率较高。为了在继承两种方法优点的同时克服它们的缺点,本文提出了一...

    于小勇
  • OpenJDK 14 性能保持提升,但 OpenJDK 8 仍是最强王者

    OpenJDK 14 已于近日 GA,其在性能方面是否有改进、以及有哪些改进引起了不少开发者的关注。本文将会介绍通过运行新的基准测试以考察从 OpenJDK 8...

    程序猿DD
  • LeetCode 26. 删除排序数组中的重复项

    给定一个排序数组,你需要在 原地 删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度。

    村雨遥

扫码关注云+社区

领取腾讯云代金券