父绝子绝的用法

最新推荐文章于 2023-04-11 16:51:15 发布
最新推荐文章于 2023-04-11 16:51:15 发布
阅读量1k 收藏 5
点赞数
分类专栏： HTML/CSS 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52449484/article/details/121716182
版权

子元素是绝对定位，父元素为相对定位、绝对定位或固定定位，则子元素均以父元素作为坐标参照系。
绝对定位不占用位置，则父绝子绝的情况就是父元素不会影响子元素的位置排列
在这里插入图片描述
CSS结构如图所示，city相对于map绝对定位，但是不需要给city设置宽高，city的大小靠里面的子元素dotted和pulse撑起来的
这时候pulse又需要另外定位，且pulse需要覆盖dotted，则可以设置绝对定位，不影响结构

子绝父相的.html
06-18
HTML子绝父相。子绝父相 —— 子级是绝对定位，父级要用相对定位。 子绝父相是使用绝对定位的口诀，要牢牢记住！
vue 父组件调用子组件方法及事件
08-27
为了实现父组件调用子组件方法，我们可以使用 `ref` 属性将子组件实例传递给父组件，然后在父组件中使用 `this.$refs.refName.method` 来调用子组件方法。 例如，在上面的例子中，我们在子组件中定义了 `fileClick`...
子绝父相
qq_37908708的博客
09-26 484
四种定位模式 子类绝对定位不占有位置，父类占有位置 例子的css .red{ border:1px red solid; width: 30px;height: 30px; background-color:red; } .blue{ border: blue; width: 30px;height: 30px; background-color:blue; } .green{ bo...
父相子绝
weixin_44549439的博客
03-29 653
1、relative相对定位会在标准流当中占位置； 2、absolute绝对定位不会在标准流当中占位置（“浮”起来，标准文档流无视它的存在）； 3、绝对定位一定要有 参照物才能相对参照物进行定位，绝对定位的位置是相对于距离它最近的已经定位的祖先元素进行的定位（这里强调不一定非要“子绝父相”，子绝父绝也是可以的） ...
CSS中的子绝父相是什么意思
m0_37890907的博客
04-05 1万+
如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素 以其父元素为标准来定位。 如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。
CSS定位中“父相子绝”
weixin_30622107的博客
12-17 427
一、定位的介绍 　　定位有三种：相对定位(position:relative)、绝对定位(position:absolute)、固定定位(position:fixed) 二、三种定位的用法，特点和实例 2.1、相对定位　　特性：不脱标、形影分离、老家留坑 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head...
vue 使用ref 让父组件调用子组件的方法
08-28
Vue 使用 Ref 让父组件调用子组件的方法 Vue.js 是一个流行的前端框架，提供了许多强大的特性来帮助开发者快速构建应用程序。其中，使用 Ref 让父组件调用子组件的方法是 Vue.js 中一个非常有用的特性。本文将详细...
vue 父组件中调用子组件函数的方法
10-16
在Vue.js框架中，父子组件之间的通信是常见的需求，其中父组件调用子组件的方法是实现特定功能的重要方式。以下详细介绍Vue中父组件调用子组件函数的方法及其知识点。 首先，要理解Vue组件的定义与引用方式。一个...
快速了解Vue父子组件传值以及父调子方法、子调父方法
10-15
然后在父组件中，可以使用`this.$refs.childRef`来引用子组件实例，调用其方法： ```js methods: { childCli() { this.$refs.childRef.childMethod(); } } ``` 在子组件中定义`childMethod`方法： ```js ...
CSS中子绝父相布局
热门推荐
安静的对折的专栏
08-31 4万+
如果我们要将hot图片放到下图的位置，我们该怎么实现？ 首先我们来进行布局，用一个div包括一个a标签和img标签，并给a标签设置样式，如下代码： Document * { margin: 0; padding: 0; } .hot a {
css当中的子绝父相重要性
qq_40169837的博客
03-19 1866
有几点请大家了解(可以不看): 1、relative相对定位会在标准流当中占位置; 2、absolute绝对定位不会在标准流当中占位置; 3、绝对定位一定要有参照物才能相对参照物进行定位; 4、绝对定位是 相对于距离它最近的已经定位的祖先元素 进行定位 5、不一定非要“子绝父相”，子绝父绝也是可以的 正题:为什么不用“子绝父绝”? 首先:比如广告横幅右上角“关闭按钮”(我们的本意是要让图标“浮”在...
关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）
CLP19930214的博客
08-26 2206
关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置） 欢迎转发，但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言：最近在学习JavaWeb前端的CSS，关于CSS中的定位有时候可能会使用到子绝父相，由于本人的水平有限如果有什么地方说错了，请指出来我好进行及时地修改。 一、什么是CSS...
css父相子绝 导航,CSS中子绝父相布局
weixin_33664951的博客
08-03 238
如果我们要将hot图片放到下图的位置，我们该怎么实现？ 首先我们来进行布局，用一个div包括一个a标签和img标签，并给a标签设置样式，如下代码：Document* {margin: 0;padding: 0;}.hot a {display: inline-block;height: 32px;width: 80px;text-decoration: none; /*去掉a标签的默认样式下划线...
css中的子绝父相具体例子
fighting_dream的博客
01-25 2918
子绝父相是什么呢？ 子级是绝对定位的话，父级要用相对定位。 1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子 。 2.子盒子的运动范围必须在父盒子里面移动，因此此时父盒子需要加定位（相对或绝对或固定定位）。 3.因为父盒子需要占有位置，放子盒子能浮在上面，因此父盒子应该是相对定位。 现在我先做一个例子。背景： html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta
子绝父相的积累
小森努力努力再努力i
03-17 371
首先你必须知道的是：top、right、bottom、left这四个属性要生效的话,必须得设置相对定位/绝对定位，即position：relative;或者position：absolute;，也就是说top、right、bottom、left是为相对定位/绝对定位而生的。 子绝父相就是：子元素为绝对定位(position：absolute;)，父元素为相对定位position：relative;。例如A为子元素，那么父元素B必须包含A，也就是说AB一定是嵌套关系(父子关系),不可以是兄弟关系。 A为.
C#实现winform用子窗体刷新父窗体及子窗体改变父窗体控件值的方法
09-03
在这种方法中，我们通过定义一个自定义的委托`SetVisiableHandler`来传递一个方法到子窗体，这个方法可以在子窗体中调用以改变父窗体的控件值。以下是具体的步骤： 1. 在父窗体`Form2`中定义委托类型`...
【CSS】定位 ③ ( 绝对定位 | 父容器有定位相对于父容器定位 | 父容器没有定位相对于浏览器进行定位 )
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-11 2156
一、绝对定位 二、标准流下的父容器与子元素关系 1、标准流下父容器与子容器代码 2、移动父容器后的效果 三、子元素设置绝对定位与父容器是否有定位的效果对比 1、父容器没有定位的情况下为子容器添加定位 2、父容器有定位的情况下为子容器添加定位 3、父容器没有定位爷爷容器有定位的情况
CSS布局-定位，相对，绝对，子绝父相，固定定位，层级关系。
weixin_48370579的博客
12-11 2376
CSS布局-定位，相对，绝对，子绝父相。 目录CSS布局-定位，相对，绝对，子绝父相。1、定位1.1 网页常见布局方式1.2 定位的常见应用场景2.1 定位初体验2.2 使用定位的步骤3.1 静态定位4.1 相对定位5.1 绝对定位5.2 绝对定位到底相对于谁进行偏重点6.1 子绝父相介绍7.1 固定定位8.1 元素层级问题8.2 更改定位元素的层级重点学习目标 ◆ 能够说出 定位 的常见应用场...
【css】根据父元素的位置固定子元素的位置
weixin_62685484的博客
08-10 1539
根据父元素的位置固定子元素的位置
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值