CSS定位——子绝父相的原理（相对定位和绝对定位）

最新推荐文章于 2023-03-12 22:58:12 发布
最新推荐文章于 2023-03-12 22:58:12 发布
阅读量3.3k 收藏 12
点赞数 3
分类专栏： 前端基础 前端开发 CSS定位 文章标签： css 前端 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62242375/article/details/128635859
版权

一、子绝父相的解释

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

二、特点

  • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

  • 父盒子需要加定位限制子盒子在父盒子内显示。

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

    这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

三、总结

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

四、应用场景

下拉菜单、重叠图片等

橘子阿飞
关注
  • 3
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS中关于绝对定位和相对定位
01-08
body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {    width: 100px;    height: 100px;    margin: 5 auto;    color: #fff;    background: #000; } .aa, .bb, .cc, .dd, .ee {    top: 10px;    left: 10px;    width: 10px;    height: 10px;    overflow: hidden;    background: #F90; } .b, .d, .e {positi
子绝父相的.html
06-18
HTML子绝父相。子绝父相 —— 子级是绝对定位，父级要用相对定位。 子绝父相是使用绝对定位的口诀，要牢牢记住！
html中父子元素的解释,CSS 子绝父相 理解
weixin_33205138的博客
06-08 3545
首先你必须知道的是：top、right、bottom、left这四个属性要生效的话,必须得设置相对定位/绝对定位，即position：relative;或者position：absolute;，也就是说top、right、bottom、left是为相对定位/绝对定位而生的。子绝父相就是：子元素为绝对定位(position：absolute;)，父元素为相对定位position：relative;。...
子绝父相原理
weixin_62623740的博客
03-27 1284
今天在写前端组件搜索框时遇到一个问题，如何在我写的input中插入其他的button，例如搜索键和清除键。然后在自己去查询资料之后，看到了一个子绝父相的方法。 <div id="box"> <input type="email" id="search" placeholder="请输入" required v-model="value" /> <button i...
css中子绝父相
老简单题
02-07 1811
子绝父相：绝指的是绝对定位，即css中的position: absolute；相是指css中的position: relative。 子绝父相能够使子节点按照父节点的标准进行绝对定位 例如：父盒子添加margin-left后，子节点也会跟着父节点的位置相对移动，因为子节点在父节点中的位置是相对固定的。 ...
子绝父相
qq_37908708的博客
09-26 449
四种定位模式 子类绝对定位不占有位置，父类占有位置 例子的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...
定位（子绝父相）
qq_50260510的博客
03-12 2576
（1）块级元素独占一行 → 垂直布局（2） 行内元素/行内块元素一行显示多个 → 水平布局可以让原本垂直布局的块级元素变成水平布局（1）可以让元素自由的摆放在网页的任意位置（2）一般用于盒子之间的层叠情况4.定位的常见应用场景（1）解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上（2）可以让盒子始终固定在屏幕中的某个位置1.属性名：position2.常见属性值：（1）静态定位：static（2）相对定位：relative（3）绝对定位：absolute。
CSS网页布局教程:绝对定位和相对定位
12-07
通过本文你绝对能理解绝对定位和相对定位了，如果你看完本篇文章还不理解绝对定位和相对定位的话，我看你就别学CSS了！哈哈！ 概要： 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系...
css 相对定位 绝对定位 浮动 分析
09-25
W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。
div+css相对定位和绝对定位用法实例详解
09-25
在用DIV+CSS控制排版过程中，定位一直被人认为是一个难点，在没有深入理解清楚定位的原理时，排出来的杂乱网页常让他们不知所措，下面的教程能让你更深入地了解CSS定位属性
相对定位与绝对定位（子绝父相）
qq_35367566的博客
09-01 326
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 400px; height:...
CSS中子绝父相布局
热门推荐
安静的对折的专栏
08-31 4万+
如果我们要将hot图片放到下图的位置，我们该怎么实现？ 首先我们来进行布局，用一个div包括一个a标签和img标签，并给a标签设置样式，如下代码： Document * { margin: 0; padding: 0; } .hot a {
[前端] 子绝父相-相对定位和绝对定位
qq_45830308的博客
02-09 1265
[前端] 子绝父相-相对定位和绝对定位
CSS - 子绝父相
weixin_42235173的博客
06-07 3277
子绝父相 子级是绝对定位的话， 父级要用相对定位。 其实，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。 为什么要是“子绝父相”呢？ ​ 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。 ​ 父盒子布局时，需要占有位置，因此父亲只能是 相对定位. ...
[记录]-CSS中的定位-子绝父相
jgsecurity的博客
10-28 586
初学者在学习CSS中定位的使用时，往往遵循子绝父相的原则。这样的设置用于我们需要让某个子元素相对父元素进行绝对定位布局。例如： <style> .header { position: relative; height: 105px; background-color: pink; } .logo { position: absolute; top: 25px; left:
父相子绝
weixin_44549439的博客
03-29 604
1、relative相对定位会在标准流当中占位置； 2、absolute绝对定位不会在标准流当中占位置（“浮”起来，标准文档流无视它的存在）； 3、绝对定位一定要有 参照物才能相对参照物进行定位，绝对定位的位置是相对于距离它最近的已经定位的祖先元素进行的定位（这里强调不一定非要“子绝父相”，子绝父绝也是可以的） ...
子绝父相的介绍（相对定位和绝对定位的使用）
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
css--子绝父相
m0_51045721的博客
03-07 148
子绝父相 将一个小图放在大图或者大盒子的某个位置
CSS——fixed 固定定位相对于父容器
最新发布
05-19
CSS中，如果一个元素的定位属性设置为fixed，则该元素会相对于浏览器窗口进行定位，而不会受到父容器的影响。如果想要实现相对于父容器的固定定位，可以将父容器的定位属性设置为relative，再将子元素的定位属性设置为fixed。这样子元素的定位将相对于父容器进行定位。下面是示例代码： HTML部分： ``` <div class="parent"> <div class="child">我是固定定位的元素</div> </div> ``` CSS部分： ``` .parent { position: relative; width: 200px; height: 200px; border: 1px solid #ccc; } .child { position: fixed; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #f00; } ``` 在上述代码中，父容器的定位属性为relative，子元素的定位属性为fixed，并且设置了top和left值，这样子元素就会相对于父容器进行固定定位。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值