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

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

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

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

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

固定定位(Fixed positioning)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小李刀刀的专栏

容易被误解的overflow:hidden

为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上...

35511
来自专栏PHP在线

PHP7性能提升之后的思考

导读] 时下不少人拿PHP7的高性能与HHVM来做比较,那么问题来了:随着PHP7性能的提升,我们能预测出未来PHP这门语言会用PHP写出来么?最经典的实例就是...

2958
来自专栏Python小屋

基于Python+tkinter+pygame的音乐播放器完整源码

import os import tkinter import tkinter.filedialog import random import time imp...

3154
来自专栏游戏杂谈

快速找到自己想要用到的cocos2d-x的缓冲动画

游戏中在做很多动画时,需要用到缓冲来增强表现。比如宝箱“鼓”几下,然后“蹦”的一下打开。很多时候要调效果时,需要轮着试,如果有一张图和实际示例效果,那就省很多事...

691
来自专栏tkokof 的技术,小趣及杂念

编程小知识之 C# indexer 和 property

C# 中的 property 想必大家都很熟悉,比起传统的 get 和 set 函数, property 的一大优势就是可以简化代码:

491
来自专栏小詹同学

人脸识别(二)——训练分类器的补充说明

之前训练分类器时利用的是一个csv文件的读取,这里仅仅用几句话介绍一种简单易行的方法。 说到底,这类问题可以归类于读取指定文件夹...

3756
来自专栏magicsoar

C++编译与链接(1)-编译与链接过程

大家知道计算机使用的一系列的1和0 那个一个C++语言程序又是如何从一个个.h和.cpp文件变成包含1和0的可执行文件呢? 可以认为有以下的几个环节 源程序->...

2079
来自专栏老九学堂

从Hello World说程序运行机制

学习任何一门编程语言,都会从Hello World 开始。对于一门从未接触过的语言,在短时间内我们都能用这种语言写出它的Hello World。然而,对于Hel...

3658
来自专栏木宛城主

Unity应用架构设计(4)——设计可复用的SubView和SubViewModel(Part 1)

『可复用』这个词相信大家都熟悉,通过『可复用』的组件,可以大大提高软件开发效率。 值得注意的事,当我们设计一个可复用的面向对象组件时,需要保证其独立性,也就是...

1975
来自专栏DOTNET

ASP.NET MVC编程——模型

1 ViewModel 是一种专门提供给View使用的模型,使用ViewModel的理由是实体或领域模型所包含的属性比View使用的多或少,这种情况下实体或领域...

3198

扫码关注云+社区