CSS - 子绝父相

已于 2022-02-16 15:46:35 修改
阅读量3.2k 收藏 8
点赞数 1
分类专栏： css 文章标签： css css3 前端
于 2019-06-07 11:16:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42235173/article/details/91126490
版权

子绝父相

子级是绝对定位的话， 父级要用相对定位。

其实，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。

为什么要是“子绝父相”呢？

​ 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

​ 父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

hello_dashen
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
子绝父相的.html
06-18
HTML子绝父相。子绝父相 —— 子级是绝对定位，父级要用相对定位。 子绝父相是使用绝对定位的口诀，要牢牢记住！
CSS之定位position(子绝父相）
weixin_50119334的博客
09-20 2256
CSS之定位 定位与浮动的区别： 浮动：可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 定位：可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其他盒子 定位的组成 定位=定位模式+边偏移 定位模式 position 选择器 {position : 属性值；} position有四个属性值： 1.**static：静态定位，**没有特殊的定位规则，遵循正常的文档流对象（极少使用） 2 .relative：相对定位，相对于元素自身进行定位（参照物为元素原来的位置） //
CSS基础知识：子绝父相的定义，什么是子绝父相，举例说明子绝父相，总结，图片详解
我就知道你会来，我们一起进步吧！
02-09 839
1.子绝父相定义定义：子级使用绝对定位，父级则需要相对定位2.举例说明（关键是图片里的文字）我们想要做个轮播图1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄第盒子。2.父盒子需要加定位限制子盒子在父盒子内显示。3.父盒子布局时，需要占据有位置，因此父亲只能是相对定位。这就是子绝父相的由来，相对定位经常用来作为绝对定位的父级。总结：父亲级需要占据原来标签的位置，因此需要相对定位，子盒子不需要占有位置，则使用绝对定位。
前端学习笔记-3-定位的一些小问题
2301_80045499的博客
02-12 450
外边界塌陷，是指两个并列的拥有padding的元素会使交界处的padding重叠，两个元素内容的间距变为较大者的padding值而非两者相加。
css中的子绝父相具体例子
fighting_dream的博客
01-25 2717
子绝父相是什么呢？ 子级是绝对定位的话，父级要用相对定位。 1.子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子 。 2.子盒子的运动范围必须在父盒子里面移动，因此此时父盒子需要加定位（相对或绝对或固定定位）。 3.因为父盒子需要占有位置，放子盒子能浮在上面，因此父盒子应该是相对定位。 现在我先做一个例子。背景： html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta
子绝父相的介绍（相对定位和绝对定位的使用）
热门推荐
qq_45287715的博客
04-17 1万+
代码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
子绝父相的原理
2302_78593467的博客
01-31 582
因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位，另外在实际网页布局设计时，如果你全部使用相对定位时，则会在页面中占位置（没有脱标），将其移动时，会使偏移量数值增大，可能会在布局四周留下大量空白，所以我们推荐使用子绝父相。绝对定位子绝父相。
css当中的子绝父相重要性
qq_40169837的博客
03-19 1805
有几点请大家了解(可以不看): 1、relative相对定位会在标准流当中占位置; 2、absolute绝对定位不会在标准流当中占位置; 3、绝对定位一定要有参照物才能相对参照物进行定位; 4、绝对定位是 相对于距离它最近的已经定位的祖先元素 进行定位 5、不一定非要“子绝父相”，子绝父绝也是可以的 正题:为什么不用“子绝父绝”? 首先:比如广告横幅右上角“关闭按钮”(我们的本意是要让图标“浮”在...
子绝父相
qq_37908708的博客
09-26 455
四种定位模式 子类绝对定位不占有位置，父类占有位置 例子的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...
子绝父相和定位水平居中
m0_62181310的博客
04-10 3713
子绝父相,子元素绝对定位,父元素相对定位,子元素位置偏移参考父元素的位置,相对定位不脱标,还占据原来的位置
详解CSS 子元素相对于父元素固定定位解决方案
11-19
基本概念
css第二天定位笔记.md
07-14
css第二天定位笔记.md
css-绝对定位的参考对象
03-06
博文链接：https://kino.iteye.com/blog/205528
ChangMM#javascript-html-css-issue#CSS-第一个子元素的margin-top1
07-25
子元素的margin-top如下html其实我们给子元素设置一个margin-top，是想他相对父层节点顶部偏移20px，但是结果是如图：子层元素没有相父元素去
前端大厂面试思维导图-css面试
最新发布
03-31
自适应两栏布局避免垂直方向margin合并BFC定义，布局规则，防止高度坍塌，自适应两栏布局，利用css构建三角形（正三角，倒三角，左/右三角），响应式布局的方式，几种，媒体查询原理，flex布局，父相子绝，，包含了...
html中父子元素的解释,CSS 子绝父相 理解
weixin_33205138的博客
06-08 3589
首先你必须知道的是：top、right、bottom、left这四个属性要生效的话,必须得设置相对定位/绝对定位，即position：relative;或者position：absolute;，也就是说top、right、bottom、left是为相对定位/绝对定位而生的。子绝父相就是：子元素为绝对定位(position：absolute;)，父元素为相对定位position：relative;。...
一、文本框和按钮不对齐现象(高度得设置一样)
weixin_72553821的博客
07-26 579
文本框和按钮不对齐现象(高度得设置一样)
定位（子绝父相）
qq_50260510的博客
03-12 2687
（1）块级元素独占一行 → 垂直布局（2） 行内元素/行内块元素一行显示多个 → 水平布局可以让原本垂直布局的块级元素变成水平布局（1）可以让元素自由的摆放在网页的任意位置（2）一般用于盒子之间的层叠情况4.定位的常见应用场景（1）解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上（2）可以让盒子始终固定在屏幕中的某个位置1.属性名：position2.常见属性值：（1）静态定位：static（2）相对定位：relative（3）绝对定位：absolute。
CSS定位——子绝父相的原理（相对定位和绝对定位）
qq_62242375的博客
01-11 3601
子绝父相，相对定位，绝对定位
css简述子绝父相原则
05-17
CSS中的子绝父相原则指的是当子元素使用绝对定位时，其父元素应该使用相对定位来作为参照物。具体来说，子元素通过设置position: absolute来使自己脱离文档流，可以自由地定位在父元素的任何位置。而父元素使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值