摘要：之前看过多次绝对定位，但是缺乏一个好的案例。如果想要让第二个覆盖第一个怎么办此时就必须取消默认排版过程，转而使用绝对定位。方法就是设置直接相对定位，距离为即可。
之前看过多次CSS绝对定位，但是缺乏一个好的案例。偶尔看到一个控件，觉得用它来说明是非常简明的。
假设我们有一个DIV，内部还嵌入两个平级的DIV，代码如下：
那么按照默认的盒子模型，两个平级的DIV一上一下，占满整个父亲DIV。如果想要让第二个DIV覆盖第一个怎么办？
此时就必须取消默认排版过程，转而使用绝对定位。方法就是设置.block2直接相对.wrapper定位，top距离为0即可。具体做法就是在.wrapper内加入代码：
position:relative
添加CSS代码到.block2内：
position:absolute;top:0;
就可以看到.block2覆盖于.block1之上。这样就达到了我们希望的效果了。
使用完全相同的结构，我们可以制作一个进度条控件：
10%
这里的.label正是通过对其父容器.progress的绝对定位，实现了.bar和.label的重合，从而实现的进度条效果。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114343.html
摘要：和绝对定位和绝对定位如果父容器有定位标识等，那么下面的子会根据原始它们应该布局的位置定位，反之如果父容器没有定位标识，那么应用了会脱离布局，并且按照传统的方式布局。基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...
摘要：使用的一个主要好处是样式隔离。假设我们仍然使用来挂接这个，如下所示请注意，元素位于模板元素内部，并与一起克隆到内。这允许在阴影根中定义的样式规则作用域。封闭模式的设计目标是禁止对来自外部世界的中的节点进行任何访问。 使用shadow DOM的一个主要好处是样式隔离。 要了解这意味着什么，让我们来假设我们要创建自定义进度条组件。 我们可以使用两个嵌套的DIV来显示条形，使用另一个DIV来...
摘要：张鑫旭的深入理解之学习笔记绝对定位的特性绝对定位与浮动相似，都有破坏性和包裹性。利用绝对定位元素脱离文档流的特性，使用动画可以避免大范围的回流和重绘。绝对定位元素拉伸实现宽高自适应，可应用于大范围的布局。 《张鑫旭的CSS深入理解之absolute》学习笔记 绝对定位的特性 绝对定位与浮动相似，都有破坏性和包裹性。浮动的一些应用场景中也可用绝对定位替代 绝对定位的行为表现 无依赖绝对...
摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。 这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...
摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。 这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...
阅读 1375·2021-10-08 10:04
阅读 2679·2021-09-22 15:23
阅读 2721·2021-09-04 16:40
阅读 1170·2019-08-29 17:29
阅读 1491·2019-08-29 17:28
阅读 2982·2019-08-29 14:02
阅读 2218·2019-08-29 13:18
阅读 835·2019-08-23 18:35
