专栏首页front-end technologycss 对元素在文档中的排列的影响

css 对元素在文档中的排列的影响

文档中元素的排列主要是根据层叠关系进行排列的;

  形成层叠上下文的方法有:

    1)、根元素

    2)、position 的属性值为: absolute | relative,且 z-index 值不为 auto ;

    3)、position 值为fixed | stick ;

    4)、z-index 值不为 auto 的 flex 元素,即父元素属性 display: flex | inline-flex;

    5)、opacity 属性值小于 1 的元素;

    6)、transfrom 属性值不为 none 的元素;

    7)、mix-blend-mode 属性值不为 normal 的元素;

    8)、filter、perspective、clip-path、mask、mask-image、mask-border ;

    9)、perspective 值不为 isolate 的元素;

    10)、will-change 中指定了任意 css 属性,即便没有直接指定这些属性对的值;

    11)、-webkit-overflow-scrolling 属性设置为 touch 的元素;

z-index   z-index 只使用于定位的元素,对非定位元素无效,它可以被设置为正整数、负整数、0、auto;如果一个定位元素没有设置 z-index ,那么默认为 auto;

  元素的 z-index 值只在同一个层叠上下文中有意义。如果父级层叠上下文的层叠等级低于另一个层叠上下文的,那么它 z-index 设的再高也没用;

层叠顺序   层叠顺序(层叠次序、堆叠顺序)描述的是元素在同一个层叠上下文中的顺序规则,从底部开始,共有七种层叠顺序:

    1)、背景和边框;

    2)、负 z-index 值;

    3)、块级元素;

    4)、浮动元素;

    5)、行内元素;

    6)、z-index : 0 ;

    7)、正 z-index 值;

  除了层叠顺序规则之外,还有一个规则,那就是:后来居上;

文档流   文档流分三种: 常规流、浮动、绝对定位;

BFC   BFC(block Formatting Context)块级格式化上下文,是用于布局块级盒子的一块渲染区域,相对的还有 IFC (inline Formattion Context) 内联格式化上下文;

  一个 BFC 的范围包含创建该上下文元素的所有子元素,但不包括创建的新 BFC 的子元素的内部元素;

  触发 BFC 的方式有:

    1)、根元素,即 HTML 标签;

    2)、浮动元素,即 float 值为 left | right 的元素;

    3)、overflow 值不为 visible ,即值为 auto | scroll | hidden;

    4)、display 值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid;

    5)、定位元素:position 值为 absolute、fixed;

    6)、contain 为 layout、content、paint 的元素;

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端小知识点总结,助力你成功面试!

    1.Doctype的作用:此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 2.严格模式与混杂模式如何区分?有何意义? 区分浏览器的使用的标准 ...

    前端老鸟
  • canvas的api总结

    Canvas是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作

    前端老鸟
  • 史上最全的前端基础面试题,你必须掌握哦!

    个人收集的前端知识点、面试题和答案,参考答案仅代表个人观点,方便复习,目录如下,通过文档内搜索目录可快速定位章节

    前端老鸟
  • httprunner学习20-跳过用例skip/skipIf/skipUnless

    在实际工作中,我们有时候会需要对测试用例加判断,比如某个接口功能暂时去掉了,我们希望对这个用例skip不去执行。 当其它的接口依赖于登陆接口返回的token时候...

    上海-悠悠
  • 整合spring cloud云架构 - SSO单点登录之OAuth2.0登录认证(1)

    之前写了很多关于spring cloud的文章,今天我们对OAuth2.0的整合方式做一下笔记,首先我从网上找了一些关于OAuth2.0的一些基础知识点,帮助大...

    庞小明
  • Python+sklearn使用朴素贝叶斯算法识别中文垃圾邮件

    2、读取全部训练集,删除其中的干扰字符,例如【】*。、,等等,然后分词,删除长度为1的单个字。

    Python小屋屋主
  • JWT(json-web-token) 详解及应用

    Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),

    郭大侠
  • 四则运算作业

    py3study
  • 如何查看某个js 变量 runtime 类型

    一种办法是根据byId传入的id value到具体的xml view里根据id 查询,可得知tab 是一个指向List类型的变量。

    Jerry Wang
  • 认证鉴权与API权限控制在微服务架构中的设计与实现(三)

    引言: 本文系《认证鉴权与API权限控制在微服务架构中的设计与实现》系列的第三篇,本文重点讲解token以及API级别的鉴权。本文对涉及到的大部分代码进行了分析...

    aoho求索

扫码关注云+社区

领取腾讯云代金券