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

Dreamy.TZK

发布于 2020-04-09 15:46:02

8980

发布于 2020-04-09 15:46:02

文章被收录于专栏：小康的自留地

定位

定位属性为position

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

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

绝对定位

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

绝对定位的集中情况

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

bottom值

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

固定定位

相对于浏览器窗口的定位

脱离文档流

相对定位

不脱离文档流

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

堆叠

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

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

继承

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

可以到帮助文档进行查阅

层叠

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-02-10，如有侵权请联系 cloudcommunity@tencent.com 删除

c++

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

c++

css

登录后参与评论

0 条评论

热度