div 相对于浮动层定位，不占位

最新推荐文章于 2025-06-13 16:23:26 发布
最新推荐文章于 2025-06-13 16:23:26 发布
阅读量1.1w 收藏
点赞数
文章标签： div border class float table
本文通过一个简单的例子展示了如何使用CSS绝对定位使元素不占位置，并且能够相对于父元素进行精确布局。这种技巧对于网页布局非常有用，尤其是在需要创建悬浮或者固定定位的元素时。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<style>
.kk1{
 float:left; position:relative;
 widht:100px;
 border:0;
}
.kk2{
 position:absolute;
 top:20px;
 left:20px;
}
</style>
<div class='kk1' style='z-index:50'>
 <div>好好学习,</div>
 <div class='kk2'>
  <table width='250' border='0' cellspacing='0' cellpadding='2' align='left'>
   <tr><td><img src='http://www.baidu.com/img/logo.gif' border=0></td></tr>
   <tr><td>文字内容自己编辑</td></tr>
  </table></div>
</div>

天天向上.因为class='kk2'的层不占位所以显示时这一行紧跟着"天天向上"

 
renyanbinnet
关注
CSS中div元素不占位的原因及解决方法
SVIPCODE的博客
09-25 1087
在CSS中，div元素是一个常用的容器元素，用于组织和布局网页的内容。然而，有时候我们会遇到div元素不占位的情况，即它不会撑开父容器的高度或宽度。总结起来，造成div元素不占位的原因主要是浮动、绝对定位和缺乏块级格式化上下文。针对这些原因，我们可以采取一些解决方法来确保div元素正确占位。如果你在实际开发中遇到这个问题，可以根据具体的情况选择合适的解决方法来解决。另外，还可以使用clearfix技巧，给父容器添加一个伪元素，并设置。属性来生成BFC，使得父容器的高度能够包含内部的浮动元素。
HTML布局与浮动
weixin_43229826的博客
11-02 1090
1.声明变量： var 变量 = 变量值 , 变量 = 变量值 , 变量 = 变量值 ; 声明多个变量，只需一个var，多个变量之间使用英文逗号隔开即可 只声明变量，不赋值的程序会显示 undefined （未定义的） 3.不声明且不赋值的会直接报错，不声明但直接赋值可以显示，但会影响全局变量。 变量命名规范： es6新加了一个变量: symbol; 数值型number: 1. isNaN 判断一个变量是否为非数字的类型，返回结果为false或true...
CSS基础学习1
something for nothing的博客
06-13 1026
css基础学习1
DIV 浮动存不占空间
weixin_30642869的博客
05-17 566
DIV 浮动存不占空间比如<div style="width:80px; border:1px solid #333"><div style="float:left; height:50px; width:20px; background:#CCC"></div><div style="float:left; height:70px; width:50px...
HTML定位——绝对定位和相对定位、固定定位
dieqiongxi4115的博客
09-22 831
1、绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。 position：absolute； 1 <!DOCTYPE html> 2 <html...
div固定定位不占位,收缩浏览器时不随着窗口变化解决方案
wang9rui的博客
01-07 3545
position:有5种定位 其中fixed是相对于浏览器定位的,所以收缩浏览器当前元素会随之变化 解决方案:1.只需要在滚动的时候动态加个class类名，加个固定定位 2.加个占位的父级元素 设置相应宽度 原因：动态添加fixed,并且不设置left right值 是相对于父元素的 高度是相对于浏览器的 ...
css 相对定位 绝对定位 浮动 分析
09-25
绝对定位则与文档流完全分离，它基于最近的已定位祖先元素进行定位，如果没有已定位的祖先，那么会相对于浏览器窗口或者`<body>`元素。使用`position: absolute;`可以实现这一效果： ```css #box_absolute { ...
绝对定位的DIV宽度自动适应的一个方法
10-31
`）是一种常见的布局方式，它能够使元素脱离文档流，并相对于最近的已定位祖先元素进行定位。当涉及到需要绝对定位的元素自适应宽度时，情况会变得稍微复杂一些，尤其是在处理旧版浏览器兼容性问题时。 #### 方法...
什么是css绝对定位与相对定位,CSS相对定位与绝对定位
weixin_39664136的博客
08-04 1326
1.相对定位Position : relative ;特点：1 如果没有定位偏移量，对元素本身没有任何影响；2 不使元素脱离文档流，空间是会被保留；3 不影响其他元素布局；4 left、top、right、bottom是相对于当前元素自身进行偏移的。代码：初始效果为三个方形并列向下，对box2添加了相对定位，box2相对于本身left: 100px，发生位移后，box2实际占位为偏移前的原位置而非...
Div CSS网站布局视频教程第10课_理解CSS定位与div布局
04-07
3. **相对定位（Relative Positioning）**：元素的原始位置会被移动，但仍然保持其在正常流中的占位，不影响其他元素的位置。 4. **绝对定位（Absolute Positioning）**：元素从正常流中移除，其位置相对于最近的已...
html 如何不拉伸td,html - table 表格不被撑开，td某些列宽度固定某些列自适应
weixin_39722917的博客
06-05 1944
1，实现table细边框,设置如下css：table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}2，table表格宽度固定，同时td内容过长也不会被撑开，设置如下css：table{table-layout:fixed;word-break:break-all;}3，在上面css设置下，td的width...
CSS定义position:fixed之后的div没有占据一行的解决办法
superman__007的博客
09-11 3990
方法，直接加上left:0;right:0即可。如下。 position: fixed; top: 20px; left: 0; right: 0; z-index: 666;
转---30 分钟学会 Flex 布局
weixin_34345560的博客
03-04 135
正文从这开始～ Flex 基本概念： 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cro...
div不占位置_不是吧，不是还有人不知道绝对定位和相对定位的区别吧
weixin_39908462的博客
11-24 414
相对定位和绝对定位区别相对定位position:relative相对于原来的位置移动，元素不脱离文档流，不影响其他元素的布局 举个 . 由图片可以见 box 定位后相对于原来的位置上偏移 100px ,左偏移 100px 绝对定位position:absolute元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位 1.相对于最近的非 static 祖先元素定位 举个 body 由图片可以见...
关于用JS隐藏div占用和不占用页面位置的小记录
我是孤单的飞鸟
10-21 6844
/document.getElementById("qijiandian").style.display = "block";
CSS：绝对定位不再占有原先的位置（脱离标准流）
听海边涛声
08-05 207
CSS：绝对定位不再占有原先的位置（脱离标准流）
绝对定位父元素高度塌陷
最新发布
06-24
<think>我们正在解决一个CSS问题：绝对定位的子元素导致父元素高度塌陷。根据引用，高度塌陷通常发生在子元素浮动或绝对定位时，父元素无法正确计算高度。引用[2]明确提到绝对定位是导致高度塌陷的原因之一。绝对定位（position:absolute）会将元素从正常文档流中移除，因此父元素在计算高度时不会包含这些子元素的高度，导致父元素高度塌陷（表现为0或较小高度）。解决方案思路：1.我们可以参考浮动导致高度塌陷的解决方案，但绝对定位的情况略有不同，因为绝对定位的元素完全脱离文档流，而浮动的元素还会占据空间（但父元素不计算其高度）。2.常见的解决浮动高度塌陷的方法（如清除浮动）对绝对定位不一定有效，因为绝对定位的元素不参与父元素的高度计算。因此，我们需要针对绝对定位的情况采取特定方法：方法1：给父元素设置明确的高度（fixedheight）但这种方法不够灵活，如果子元素高度变化，父元素高度不会自适应。方法2：使用JavaScript动态计算子元素高度并设置给父元素但这不是纯CSS解决方案。方法3：利用父元素相对定位（position:relative）并调整布局，但仅设置相对定位并不能解决高度塌陷。方法4：让父元素包含一个常规流的子元素，该子元素的高度与绝对定位的子元素相同。但这样需要额外的元素。然而，引用[4]提到了一种清除浮动的常用方法（使用clearfix），但注意清除浮动主要针对浮动元素，对绝对定位元素无效。那么针对绝对定位，我们有什么纯CSS的解决方案呢？实际上，绝对定位的元素不会影响父元素的高度，这是其特性。所以通常的解决方案是避免使用绝对定位来影响父元素的高度，或者通过其他方式显式设置父元素的高度。但是，如果我们希望父元素能够自适应包含绝对定位子元素的高度，我们可以尝试以下方法：方法A：将父元素也设置为绝对定位（或固定定位），但这会改变整个布局，通常不推荐。方法B：使用一个伪元素（pseudo-element）来模拟绝对定位子元素的高度，但伪元素本身在常规流中，并且我们需要知道绝对定位子元素的高度。实际上，没有直接的方法让父元素自动包含绝对定位子元素的高度，因为这是绝对定位的设计初衷（脱离文档流）。因此，常见的做法是：-如果知道子元素的高度，直接设置父元素的高度。-如果子元素高度动态，使用JavaScript来调整父元素高度。但是，我们也可以尝试一些CSS技巧：技巧1：将父元素设置为相对定位（position:relative），然后绝对定位的子元素相对于父元素定位。但父元素仍然不会包含绝对定位子元素的高度。此时，我们可以通过给父元素设置一个min-height，该min-height等于绝对定位子元素的高度（如果已知）。技巧2：使用flex布局或grid布局？但绝对定位的子元素依然脱离文档流，所以这些布局也不会计算其高度。技巧3：将绝对定位改为相对定位（如果设计允许），这样父元素就能包含子元素的高度。技巧4：使用margin来模拟绝对定位的效果，但这样可能达不到同样的定位效果。综上所述，对于绝对定位导致的父元素高度塌陷，没有完美的纯CSS解决方案（像清除浮动那样）。因此，我们可能需要根据具体情况选择：1.如果绝对定位子元素的高度是固定的，则设置父元素的height或min-height等于该高度。2.如果高度不固定，使用JavaScript动态调整父元素高度。3.考虑是否可以用其他布局方式（如flex或grid）代替绝对定位。但是，引用中并没有直接给出绝对定位的解决方案，所以我们根据CSS原理进行推导。另外，引用[3]和[4]中提到的清除浮动的方法（例如clearfix）对绝对定位无效，因为绝对定位不产生浮动流。因此，我们给出以下建议：1.如果可能，避免使用绝对定位，改用其他布局方式。2.如果必须使用绝对定位，且子元素高度固定，设置父元素高度。3.如果子元素高度不固定，使用JavaScript动态调整父元素高度。不过，我们也可以尝试一种利用伪元素的方法，但需要将绝对定位的子元素放入一个常规流的容器中（该容器高度为0，但通过padding-bottom等技巧来占据空间），这种方法比较复杂，且不一定适用所有情况。这里提供一个利用常规流元素占位的思路（需要额外元素）：在父元素内，除了绝对定位的子元素，再添加一个常规流的兄弟元素（例如一个div），将这个兄弟元素设置为可见性隐藏（visibility:hidden），并设置其高度和绝对定位子元素相同（或者通过JavaScript设置）。这样父元素就会包含这个常规流元素的高度。但这样需要维护两个元素（绝对定位元素和占位元素）的高度一致。因此，在纯CSS无JavaScript的情况下，如果没有固定的高度，很难解决绝对定位导致的高度塌陷。结论：在CSS中，绝对定位导致的高度塌陷问题没有像浮动那样的纯CSS通用解决方案。通常需要根据具体场景选择上述方法之一。下面我们用一个示例来说明：问题示例代码：<style>.parent{position:relative;/*作为绝对定位子元素的定位上下文*/border:1pxsolidred;}.child{position:absolute;top:0;left:0;width:100%;height:100px;background:blue;}</style><divclass="parent"><divclass="child"></div></div>此时，.parent的高度为0，因为.child是绝对定位。解决方案1：设置.parent的高度（例如100px）：.parent{height:100px;}解决方案2：使用JavaScript动态设置高度（这里不展开）。解决方案3：在.child的后面添加一个占位的兄弟元素（常规流）：<divclass="parent"><divclass="child"></div><divclass="placeholder"style="height:100px;visibility:hidden;"></div></div>这样.parent的高度就是占位元素的高度（100px）。但占位元素的高度需要和.child保持一致（如果.child高度变化，占位元素高度也要变，可能需要JS）。解决方案4：使用伪元素占位（但伪元素的内容高度需要指定）：.parent::after{content:"";display:block;height:100px;/*与绝对定位子元素高度相同*/visibility:hidden;}这样.parent就会包含这个伪元素的高度。但同样需要知道高度或者通过JS设置。因此，如果绝对定位子元素的高度是动态的，纯CSS难以解决，推荐使用JavaScript。最后，如果设计允许，考虑不使用绝对定位，而是使用flex或grid布局，或者相对定位。注意：以上解决方案需要根据实际情况选择。相关问题：1.除了绝对定位，还有哪些情况会导致父元素高度塌陷？2.如何用CSS清除浮动？有哪些方法？3.在CSS中，绝对定位和浮动有什么区别？4.如何实现一个父元素包含多个不同高度的绝对定位子元素？</think>### CSS中绝对定位导致父元素高度塌陷的解决方案 当子元素使用绝对定位（`position: absolute`）时，它会完全脱离文档流，导致父元素无法检测其高度，从而出现高度塌陷问题。以下是5种解决方案，结合引用内容和CSS原理说明： #### 1. **设置父元素固定高度（简单场景）** ```css .parent { position: relative; /* 定位上下文 */ height: 200px; /* 固定高度 */ } .child { position: absolute; top: 0; left: 0; } ``` - **原理**：显式定义父元素高度 - **缺点**：无法自适应子元素高度变化 - **适用场景**：子元素高度固定时 #### 2. **利用伪元素占位（推荐方案）** ```css .parent::after { content: ""; display: block; height: 100px; /* 等于子元素高度 */ visibility: hidden; } ``` - **原理**：创建常规文档流元素占位[^4] - **优点**：无额外HTML标签 - **注意**：需已知子元素高度 #### 3. **添加常规流占位元素** ```html <div class="parent"> <div class="child">绝对定位元素</div> <div class="placeholder" style="height: 100px"></div> </div> ``` - **原理**：占位元素撑开父容器高度[^3] - **缺点**：需额外HTML元素 #### 4. **JavaScript动态计算高度** ```javascript const parent = document.querySelector('.parent'); const child = document.querySelector('.child'); parent.style.height = child.offsetHeight + 'px'; ``` - **原理**：实时计算子元素高度并赋值 - **适用场景**：子元素高度动态变化时 #### 5. **避免绝对定位（替代方案）** ```css .parent { position: relative; } .child { position: relative; /* 改用相对定位 */ top: 0; left: 0; } ``` - **原理**：相对定位仍在文档流中[^2] - **效果**：父元素自动包含子元素高度 > **关键机制**：绝对定位元素完全脱离文档流，父元素计算高度时忽略其尺寸[^2]。解决方案的本质是通过常规文档流元素显式定义高度，或改用其他定位方式。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值