绝对定位position:absolute下，父元素高度塌陷/无法撑开父盒子的原因和解决方案

最新推荐文章于 2024-05-02 21:18:53 发布
最新推荐文章于 2024-05-02 21:18:53 发布
阅读量7.4k 收藏 3
点赞数 1
文章标签： css3 css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46833693/article/details/121172748
版权

绝对定位的元素完全从文档流当中移走，所以他们的尺寸无法影响到父元素的尺寸。
如果你真的想实现绝对定位还能撑开父元素，只能通过JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。
或者，用 float: left / float:right 还有 margin 来调整位置，子元素再通过父元素设置的overflow:hidden来撑开父元素。
 

如果实在不懂，就把父元素的高度写死，只不过那啥了

渔舟唱晚@
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
01-21
首先我们来看一个代码： 复制代码代码如下:<div id=”layer1″ xss=removed> <div id=”layer2″ xss=removed>Absolute (layer2)</div> <div id=”layer3″ xss=removed>Normal Text Content
ie6下position：absolute不显示问题解决方法
09-25
position：absolute属性在其他浏览器中都是正常的，但惟独在ie6下有问题，下面是经过测试可行的解决方法
Css 子元素绝定位，导致父元高度坍缩「解决方案」
最新发布
uuutt的博客
05-02 10
最近在使用Vue练手基于canvas的小游戏开发，发现其中的背景图与交互UI需要分开实现。思路：第一个canvas 不设定绝对定位用于撑开父元素，其余canvas设定绝对定位重叠。其中，多个canvas要相互重叠，并且撑开父元素，
position:absolute 父元素高度塌陷
2shou
02-25 3038
position:absolute 父元素高度塌陷
绝对定位的子盒子无法撑开父盒子的原因和解决方案
Y_Aryan的博客
08-07 3561
。
高度塌陷原因及其解决办法
weixin_44713688的博客
07-14 2973
html（6）高度塌陷 1.原因： 当父元素没有添加高度（高度自适应），而子元素脱离文档流的时候（当子元素设置了float或者子元素的position属性值为absolute或是fixed，都会脱离文档流），就会发生高度塌陷。 设计原因：高度塌陷设计原理 2.解决方法： 方案一：给父元素一个固定的高度 缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。 方案二：给父元素添加属性 overflow: hidden; 缺点：当子元素有定位属性时，设置 overflow: hidden;
JS解决子元素浮动或绝对定位造成的父元素高度塌陷问题
Arvin的博客
11-21 1978
当我们在代码中给子元素添加浮动或者绝对定位时，父元素会存在高度塌陷问题，可以使用JS来解决。 首先通过获取子元素的高度，将子元素的高度传给父元素，同时在页面窗口或框架被调整大小时获取子元素高度并传给父元素。代码如下： 子元素.onload = function () { height = this.height; 父元素.style.height = height + "px"; } window.onresize
【CSS】使用绝对定位 / 浮动解决外边距塌陷问题 ( 为父容器 / 子元素设置内边距 / 边框 | 为子元素设置浮动 | 为子元素设置绝对定位 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-13 1232
一、外边距塌陷描述 1、没有塌陷的情况 2、外边距塌陷情况 二、传统方法解决外边距塌陷 - 为父容器 / 子元素设置内边距 / 边框 三、使用浮动解决外边距塌陷 - 为子元素设置浮动 四、使用绝对定位解决外边距塌陷 - 为子元素设置绝对定位
css 子absolute导致父高度塌陷问题
树上骑个猴的博客
01-11 911
网上其他方法都是清除浮动的，解决absolute的塌陷问题，发现只有以下这种js有效 <body> <div class="container" id="container"> <div class="box" id="box" ></div> </div> <script> //拿到子元素的高度 var box=d
position:relative/absolute无法冲破的等级
10-31
position:relative/absolute无法冲破的等级
css解决浮动导致父元素高度坍塌的几种方法
11-21
以前布局经常会用到float进行布局，但是我们都知道使用浮动布局会存在一个问题-导致父元素高度坍塌 那我们一起来探究一下解决这个问题的方法！就先从文档流开始吧 一.定位的分类 普通流定位 浮动定位 相对定位 绝对定位 ①普通流定位 又称为默认文档流定位 1.每个元素在页面上都有自己的空间 2.每个元素都是从父元素的左上角开始渲染（显示） 3.块级元素按照从上到下逐个排列，每个元素单独成行 4.行内元素是多个元素在一行中显示，从左往右顺序排列，显示不下换行 ②浮动定位 让块级元素横向显示 float： 取值：left 让元素浮动后，在当前行停靠在父元素的左侧，
关于高度塌陷
weixin_68854196的博客
08-20 465
在我们页面布局中，经常会碰见高度塌陷问题，如何解决呢？本文为您解读各种情况以及如何解决
设置绝对定位对于子元素继承父元素的高度的影响
m0_38005587的博客
07-30 1万+
笔者在写网页时，发现一个问题，当一个父元素没有设置高度，而全靠子元素1撑起高度时，此时子元素2就无法继承父元素的100%高度，代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/tit
去掉父元素position：absolute属性后没有高度了？
热门推荐
xubingnan123的博客
01-02 1万+
前一阵子上网得时候偶然间看到这样一个题：将一个页面均分成四等分。于是我顺手做了一下。以下是我的代码和效果： 由于好奇心的作用，我把position：absolute属性删掉了，结果页面上啥也没有了。我不明白其中的原理，就去网上找了找资料并问了问朋友，到目前为止我的理解是这样的： 我们都知道absolute属性会使div脱离文档流，但是我没想到absolute这个属性脱离文档流能脱离的如此“干
margin塌陷问题
imkaifan的博客
02-18 546
margin塌陷问题1.同级盒子margin塌陷2.嵌套盒子margin塌陷1.BFC设置 1.同级盒子margin塌陷 方法一： 这一种塌陷处理方式： 期望两个盒子的上下间距为200px 1、 当设置两个盒子的margin-bottom: 100px; margin-top: 100px;由于塌陷会造成两个盒子的上下间距 仅为100px。 如果不想处理可以直接设置两个盒子的margin-bottom: 200px; margin-top: 200px; (注意：如果margin-bottom: 50px;
子元素设置margin-top和margin-bottom无效，外边距折叠导致父元素移动
阿花的博客
03-28 3374
1.为外层元素或者内层元素设置边框（border:1px solid transparent） 2.为外层元素设置overflow:hidden属性 3.为外层元素设置padding值代替内层元素的margin值 4.内层元素或者外层元素浮动：float：left或者设置绝对定位display：absolute，或者改为行内块元素：display:inline-block 5.内层元素加一点点padding值（padding:1px）
html的绝对定位脱离文档流吗,子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素...
weixin_35698190的博客
06-09 2283
纯粹的CSS无法实现。因为position:absolute就是脱离文档流，怎么能让父元素不塌陷呢？ 目前想到的只能用js和jquery来实现了，用js获取子元素的高度，赋值给父元素。test.out {position:relative;}.out:after{content: "";clear: both;}.inner {position:absolute;height:60px;backg...
相对绝对定位父元素不设置宽度，根据子元素撑开(white-space: nowrap；)
空&白的博客
07-13 443
要做一个如下的弹窗，很简单。但是当要切换成多语言或者数据是动态的话（title可能会很长），那么弹窗固定宽度就不适用了。ps:ml-18 f30 text-333 flex align-center 一些封装的样式。也有可能出现下面的情况，文字被换行了（有时候这种情况也是可以的，取决于项目要求）1.弹窗不设置width，但是可以设置最小宽度（min-width）2.整体布局正常（我这边用的是弹性布局），重点是。这种情况是弹窗不设置width，设置。但是我想要的是下图的样式。有可能会出现下图的情况。
position: absolute 怎么控制与父元素对齐
06-07
使用 `position: absolute` 定位元素时，可以通过设置 `top`、`bottom`、`left`、`right` 属性来控制元素与其父元素的对齐方式。 例如，如果需要将一个绝对定位元素对齐到其父元素的右上角，可以将父元素设置为相对定位，然后将子元素的 `top` 和 `right` 属性分别设置为 0。示例代码如下： ```html <div class="parent" style="position: relative;"> <div class="child" style="position: absolute; top: 0; right: 0;">Child element</div> </div> ``` 在这个例子中，子元素的 `position` 属性设置为 `absolute`，并且 `top` 和 `right` 属性都设置为 0，这样子元素就会紧贴着父元素的右上角对齐。同时，父元素的 `position` 属性设置为 `relative`，这样子元素的 `top` 和 `right` 属性才会相对于父元素进行定位。 除了使用 `top`、`bottom`、`left`、`right` 属性外，还可以使用 `transform` 属性进行调整，例如： ```html <div class="parent" style="position: relative;"> <div class="child" style="position: absolute; transform: translate(100%, -100%);">Child element</div> </div> ``` 在这个例子中，子元素的 `transform` 属性设置为 `translate(100%, -100%)`，这样子元素就会向右上方移动与父元素对齐。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

渔舟唱晚@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值