HTML为什么要子绝父相？

最新推荐文章于 2024-02-12 21:19:35 发布
最新推荐文章于 2024-02-12 21:19:35 发布
阅读量2.9k 收藏 4
点赞数 5
分类专栏： 页面布局 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LmissL/article/details/108647865
版权

为什么在布局时，子集元素使用绝对定位时，父级元素就要用相对定位呢？

分析:

  • 方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。
  • 父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它
    如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的
结论:父级要占有位置，子级要任意摆放，这就是子绝父相的由来。
Loss of my heart
关注
专栏目录
css3基础100问之子绝父相的由来？（38）
weixin_45147894的博客
06-17 350
一定要理解子绝父相的由来的用法。 假如我们使得两个蓝色小盒子左右排列，并且覆盖在上面，该如何做呢？ 下面再加上一个呢？ 子级绝对定位，不占有位置，可以放在父盒子里面的任何一个地方，不会影响其他的兄弟盒子。 重点：父盒子必须加定位限制盒子在父盒子内显示。要不然后面的盒子会来占位置，那就得不到想要的结果了。而且父盒子必须是相对定位，因为它要占领位置，如果是绝对定位得话，不占有位置了，是不行的。 总结： ...
子绝父相定位居中
weixin_42378409的博客
12-20 1463
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子绝父相定位盒子居中</title> <style> .box{ width: 900px; height: 900px; background-color...
子绝父相的.html
06-18
HTML子绝父相。子绝父相 —— 子级是绝对定位，父级要用相对定位。 子绝父相是使用绝对定位的口诀，要牢牢记住！
定位中为什么要按子绝父相的原则？
qq_62649563的博客
03-28 333
绝对定位移动之后 相较于之前其不占空间 什么意思呢？看下面的图那么由此我们可以看出，当未加定位时，div保持他块内元素的特性，独占一行，当其加了绝对定位之后，便不占一行了。加了相对定位之后。仍然独占一行，只不过此时是右边的。而。
css当中的子绝父相重要性
qq_40169837的博客
03-19 1860
有几点请大家了解(可以不看): 1、relative相对定位会在标准流当中占位置; 2、absolute绝对定位不会在标准流当中占位置; 3、绝对定位一定要有参照物才能相对参照物进行定位; 4、绝对定位是 相对于距离它最近的已经定位的祖先元素 进行定位 5、不一定非要“子绝父相”，子绝父绝也是可以的 正题:为什么不用“子绝父绝”? 首先:比如广告横幅右上角“关闭按钮”(我们的本意是要让图标“浮”在...
关于css中子绝父相
茂茂的博客
01-26 1242
关于css中子绝父相 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教！ 子绝父相就是对子元素和父级元素的定位有一个设置 设置了子绝父相1过后，子级元素的参考坐标系将不是页面左上角，而是定位父级的左上角，从而在进行布局时可以更方便。 下面放出代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</titl
HTML中定位及子绝父相的理解
热门推荐
qq_17853651的博客
09-20 1万+
HTML中定位有三种分别是：相对定位（relative）、绝对定位（absolute）和固定定位（fixed） 相对定位（relative）：相对定位是相对于自身位置进行偏移。当设了相对的偏移量之后，这个DIV原来所占据的位置（文档流）不   会被下面的DIV块挤占，而是空在那里；当偏移后向下或者向右的内容会被隐藏，而 这一点区别于绝对定                             ...
详解CSS 子元素相对于父元素固定定位解决方案
11-19
1. **祖先元素定位**：要使子元素相对于父元素绝对定位，父元素必须有定位属性（`position`），通常是`position: relative;`。这样，子元素就会相对于这个父元素定位，而不是相对于文档流。 2. **滚动条处理**：...
通过一个实例理解“父相子绝”（CSS重难点，附完整代码）
微子细的博客
07-02 1137
本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
子绝父相布局
weixin_30907523的博客
04-08 281
子绝父相布局经常使用，是一种比较经典的定位布局 父盒子使用相对定位：占位置，不会对下面的同级盒子产生影响；基准点，子盒子以父盒子左上角为基准点进行移动 子盒子使用绝对定位：不占位置，完全脱标，不会对兄弟元素产生影响 <body> <div class="father"> <div class="son">...
子绝父相html
weixin_73310187的博客
09-19 444
注意：子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素**
CSS定位—子绝父相
qq_43247538的博客
07-10 493
“子绝父相”是学习定位的口诀，这句话的意思是:子级是绝对定位的话，父级用相对定位。 ①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。 ②父盒子需要加定位限制子盒子在父盒子内显示。 ③父盒子布局时，需要占有位置，因此父亲只能是相对定位。 总结:因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位 ...
html中父子元素的解释,CSS 子绝父相 理解
weixin_33205138的博客
06-08 3795
首先你必须知道的是：top、right、bottom、left这四个属性要生效的话,必须得设置相对定位/绝对定位，即position：relative;或者position：absolute;，也就是说top、right、bottom、left是为相对定位/绝对定位而生的。子绝父相就是：子元素为绝对定位(position：absolute;)，父元素为相对定位position：relative;。...
CSS中的子绝父相是什么意思
m0_37890907的博客
04-05 1万+
如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素 以其父元素为标准来定位。 如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。
子绝父相的积累
小森努力努力再努力i
03-17 365
首先你必须知道的是：top、right、bottom、left这四个属性要生效的话,必须得设置相对定位/绝对定位，即position：relative;或者position：absolute;，也就是说top、right、bottom、left是为相对定位/绝对定位而生的。 子绝父相就是：子元素为绝对定位(position：absolute;)，父元素为相对定位position：relative;。例如A为子元素，那么父元素B必须包含A，也就是说AB一定是嵌套关系(父子关系),不可以是兄弟关系。 A为.
CSS - 子绝父相
weixin_42235173的博客
06-07 3359
子绝父相 子级是绝对定位的话， 父级要用相对定位。 其实，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。 为什么要是“子绝父相”呢？ ​ 因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。 ​ 父盒子布局时，需要占有位置，因此父亲只能是 相对定位. ...
CSS定位——子绝父相的原理（相对定位和绝对定位）
qq_62242375的博客
01-11 3977
子绝父相，相对定位，绝对定位
前端学习笔记-3-定位的一些小问题
最新发布
2301_80045499的博客
02-12 711
外边界塌陷，是指两个并列的拥有padding的元素会使交界处的padding重叠，两个元素内容的间距变为较大者的padding值而非两者相加。
模态框
qq_38796823的博客
09-10 372
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
uniapp 如何获取子元素的位置相对于父元素
05-05
可以使用uniapp中的`uni.createSelectorQuery()`方法获取子元素相对于父元素的位置信息。 具体步骤如下： 1. 给父元素和子元素分别设置一个唯一的id属性。 2. 在js文件中引入`uni.createSelectorQuery()`方法。 3. 使用`uni.createSelectorQuery()`方法获取父元素和子元素的位置信息。 4. 计算子元素相对于父元素的位置。 以下是示例代码： HTML: ```html <view id="parent"> <view id="child"></view> </view> ``` JS: ```javascript uni.createSelectorQuery().select('#parent').boundingClientRect(function(rect){ console.log(rect) }).exec() uni.createSelectorQuery().select('#child').boundingClientRect(function(rect){ console.log(rect) }).exec() ``` 以上代码分别获取了父元素和子元素的位置信息，并将信息打印在控制台中。接下来，我们可以计算子元素相对于父元素的位置。 ```javascript uni.createSelectorQuery().select('#parent').boundingClientRect(function(parentRect){ uni.createSelectorQuery().select('#child').boundingClientRect(function(childRect){ console.log('子元素相对于父元素的位置：', childRect.top - parentRect.top, childRect.left - parentRect.left) }).exec() }).exec() ``` 以上代码计算了子元素相对于父元素的位置，并将结果打印在控制台中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值