专栏首页小康的自留地前端课程——定位继承与层叠

前端课程——定位继承与层叠

定位

定位属性为position

  • static: 默认值,表示元素为静态定位。指定元素使用正常的布局行为,即元素在文档常规流中当 前的布局位置。
  • absolute: 表示元素为绝对定位。不为元素预留空间,通过指定元素相对于最近的非static定位祖 先元素的偏移,来确定元素位置。
  • fixed: 表示元素为固定定位。不为元素预留空间,而是通过指定元素相对于屏幕视口( viewport ) 的位置来指定元素位置。
  • relative: 表示元素为相对定位。元素先放置在未添加定位时的位置,再在不改变页面布局的前提 下调整元素位置。

简单来说定位就是规定被定位元素距离页面顶部及左边的距离

绝对定位

  • 开启后脱离文档流
  • 不设置位置的偏移量则位置不会变化
  • 偏移量
    • 正值(top)向下
    • 负值(top)向上

绝对定位的集中情况

  1. 如果当前元素的父级元素是<body>元素的话 相对于当前页面的定位
  2. 如果当前元素的父级元素不是<body>元素的话,父级元素没有开启定位 相对于当前页面的定位
  3. 如果当前元素的父级元素不是<body>元素的话,父级元素开启定位 相对于父级元素的定位

bottom

  1. 默认加载完毕后的位置 相对于当前浏览器窗口的底部
  2. 绝对定位依旧是相对于页面的定位,而不是相对于浏览器窗口的定位

固定定位

相对于浏览器窗口的定位

脱离文档流

相对定位

不脱离文档流

相对于自身原来的位置进行定位

堆叠

z- index属性指定了一个具有定位属性的元素及其子代元素的z -order。当元素之间重叠的时候,z-order决定哪一个 元素覆盖在其余元素的上方显示。通常 来说z -index属性值较大的元素会覆盖较小的一个。 对于一个已经定位的元素(即position属性值是非static的元素),z - index属性指定:

  1. 元素在当前堆叠上下文中的堆叠层级。
  2. 元素是否创建一个新的本地堆叠上下文。

继承

部分属性可以继承:对子级元素同样保留此样式。

可以到帮助文档进行查阅

层叠

层叠是CSS中的一个基本特征,它定义了如何合并来自多个源的属性值的算法。对于层叠来说,共有三种主要的样式来源: .

  1. 浏览器对HTML定义的默认样式。
  2. 用户定义的样式。
  3. 开发者定义的样式。

用户定义的样式表会覆盖浏览器定义的默认样式,然后网页开发者定义的样式又会覆盖用户样式。作为网页的开发者只需要关注开发者样式。 尽管CSS样式会来自这些不同的源,但它们的作用范围是重叠的,而层叠则定义了它们如何相互作用。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端课程——浮动

    定位的基本思想很简单,它允许定义元素相对于父级元素、另一个指定元素或者当前浏览器窗口应该显示的位置。

    Dreamy.TZK
  • 09Document对象

    Dreamy.TZK
  • jQuery原理(DOM操作相关方法)

    删除所有的元素或指定元素。判断是否传入参数,如果传入参数,则删除指定元素,否则删除全部。

    Dreamy.TZK
  • (47) 堆和PriorityQueue的应用 / 计算机程序的思维逻辑

    45节介绍了堆的概念和算法,上节介绍了Java中堆的实现类PriorityQueue,PriorityQueue除了用作优先级队列,还可以用来解决一些别的问题,...

    swiftma
  • 《图解算法》第2章 选择排序

    yeedomliu
  • 8.3 链表

    链表中每一个元素称为结点,每一个结点都包含两部分:一是用户需要用的实际参数,二是下一个结点的地址。

    闫小林
  • JDK1.9-数据结构

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • 数据结构初探

    数组是可以再内存中连续存储多个元素的结构,在内存中的分配也是连续的,数组中的元素通过数组下标进行访问,数组下标从0开始

    猿_人类
  • 使用jQuery筛选排除元素以修改指定标签的属性

    1、eq()    筛选指定索引号的元素 2、first()  筛选出第一个匹配的元素 3、last()   筛选出最后一个匹配的元素 4、hasClas...

    山河木马
  • Vector、ArrayList、LinkedList有何区别?

    Vector、ArrayList、LinkedList均为线型的数据结构,但是从实现方式与应用场景中又存在差别。

    居士

扫码关注云+社区

领取腾讯云代金券