子级绝对定位，父级相对定位的由来 --- CSS定位

CSS定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

绝对定位

相对定位

固定定位

粘性定位

子级绝对定位，父级相对定位的由来（子绝父相）
① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

案例地址：https://gitee.com/huan2515/html_css_material/tree/master/%E7%AC%AC%E5%85%AB%E5%A4%A9/04-%E5%AD%A6%E6%88%90%E5%9C%A8%E7%BA%BFhot%E6%A8%A1%E5%9D%97

定位的总结

子级绝对定位，父级相对定位的由来 --- CSS定位相关推荐

四、Vue组件化开发学习笔记——父子组件通信，父级向子级传值（props）,子级向父级传值（自定义事件），slot插槽
一.父子组件的通信在上一篇博文中,我们提到了子组件是不能引用父组件或者Vue实例的数据的. 但是,在开发中,往往一些数据确实需要从上层传递到下层: 比如在一个页面中,我们从服务器请求到了很多的数据. ...
【Vue】—子级向父级传递数据
[Vue]-子级向父级传递数据 <template><div><h2>Son</h2><div v-for='(item,index) in da ...
子标签获取父级Id值
子标签获取父级id值 1.首先,通过子标签传递,使用"this": 2.function获取所传递的值: 代码如下标签中(id = "show1") oncl ...
SQL 递归查询子级或父级
实际业务中经常会使用到无限级分类,当我们需要根据一个指定分类推算出它下面的所有子级,包括子级的子级等,或者推算出所有父级,包括父级的父级等,我一般是通过后端代码来递归推算.其实也可以通过SQL语句来实 ...
Thinkcmf子栏目获取父级栏目所有子栏目列表
网站建设时经常需要输出某个栏目的子栏目,对应的在子栏目列表页也需要输出父级栏目的子栏目列表,thinkcmf可以输出所有子栏目,但却无法在子栏目列表页也适用, 因此就需要通过对数据库表查询来完成需求: ...
Nz-tree 树结构取消父子之间强关联关系后，选中父级，子级仍然选中，但取消子级后父级不会取消选中
完整代码如下: import { Component } from '@angular/core';import { NzFormatEmitEvent } from 'ng-zorro-antd/t ...
android view父级隐藏,Android指定的子级已经有父级。必须先对子级的父级调用removeView（）...
在我的应用中,我必须经常在两种布局之间切换.错误在下面发布的布局中发生. 第一次调用布局时,没有发生任何错误,一切都很好.然后,当我调用不同的布局(空白),然后再次调用我的布局时,出现以下错误: &g ...
vue router-link子级返回父级页面
vue-router嵌套路由,从二级路由跳转到一级路由时,间歇性导致一级路由重叠解决方法: 1.使用this.$router.push跳转转载于:https://www.cnblogs.com/K ...
CSS父级子级学习总结
CSS 父级子级 http://www.divcss5.com/rumen/r239.shtml 1.认识了解简单讲CSS父级 CSS子级是相对而言,如一个DIV "A"被另外一 ...

子级绝对定位，父级相对定位的由来 --- CSS定位

子级绝对定位，父级相对定位的由来 --- CSS定位相关推荐

最新文章

热门文章