为什么将一个绝对的positioned : does元素设置为一个内联元素会使它溢出它的父元素？
将一个绝对定位（positioned: absolute）的元素设置为内联元素（display: inline）会导致它溢出其父元素的原因是，内联元素不会创建一个新的块级格式化上下文（block formatting context），而绝对定位的元素会脱离文档流，并相对于其最近的非静态定位的祖先元素进行定位。
当一个绝对定位的元素设置为内联元素时，它的定位不再受到父元素的边界限制，而是相对于父元素的内容框进行定位。由于内联元素不会创建一个新的块级格式化上下文，其父元素的边界仍然是基于其包含块（containing block）的边界计算的。因此，当绝对定位的内联元素超出其父元素的边界时，它会溢出父元素。
解决这个问题的方法是将绝对定位的元素设置为块级元素（display: block）或行内块元素（display: inline-block），这样它会创建一个新的块级格式化上下文，并且其定位将相对于该块级格式化上下文进行计算，不会溢出父元素。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：提供稳定可靠的云端数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：帮助用户快速构建、部署和管理容器化应用。详情请参考：https://cloud.tencent.com/product/tke
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和模型，支持开发者进行机器学习和深度学习的应用开发。详情请参考：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，帮助用户快速构建和管理物联网设备。详情请参考：https://cloud.tencent.com/product/iothub
- 移动应用开发平台（MADP）：提供一站式移动应用开发和运营服务，支持跨平台开发和移动应用管理。详情请参考：https://cloud.tencent.com/product/madp
相关·内容
italic; text-align: left; font-weight: normal;} 结果是溢出元素鲑鱼红内联元素停止溢出其父元素。我想继续使用:before，并且我想保持它是一个内联元素。
浏览 33提问于2019-02-06得票数 0
回答已采纳
唯一的区别是它们不接受父容器的全部宽度。我发现固定定位元素也是如此。我尝试了下面的代码。在此代码中显示了两个框。一个是静态定位，第二个是绝对定位。可以看到，静态定位框接受它的父容器(Viewport)的全部宽度。但是绝对定位的框没有接受它的父容器(Viewport)的全部宽度。<!posit
浏览 2提问于2016-02-10得票数 0
回答已采纳
1回答
我有一个滑动的carousel，它的overflow-x属性设置为hidden，它包含一次显示4个项目的数量。在这些项中，有一个按钮，它触发一个绝对定位的弹出菜单，该菜单比carousel容器长，并且相对于它的父项。当菜单可见时，它的整个高度将被截断，并变为可滚动。我想要的是
浏览 0提问于2021-05-11得票数 0
我有一个div -#容器-它延伸到窗口，充满了一个图形。我需要一个条子来浮过右边的集装箱舱。如果我使用position:absolute和right:0，那么div是根据窗口定位的，而不是容器div。如果我使用position:relative，那么div是根据#容器div定位的，但仍然占用空间，不会在#容器内容上徘徊。
下面是我尝试的一个JSFiddle。注意到，我不想使用float:right，因为这会使内容流中
浏览 3提问于2013-05-30得票数 0
回答已采纳
3回答
给定一个具有一定大小和overflow:auto的绝对定位元素，以及一个绝对定位的子元素，锚定在父元素的左下角，并在大小上超过它，如下所示： position: absolute#content { bottom: 0; width: 50%;
hei
浏览 3提问于2013-12-10得票数 2
回答已采纳
我有一个元素，需要有能力增长和收缩的内容是放在它。它有多个嵌套的div，以适应分层元素。我相信这是因为所有的父div都是绝对的。如果我将溢出元素设为绝对元素，那么我得到的只是一个空空间IE的边框；<
浏览 1提问于2014-06-15得票数 2
回答已采纳
2回答
我对CSS中的绝对位置和相对位置感到困惑。 <button style="position:"absolute"; left:10px;" >当我
浏览 1提问于2013-06-20得票数 1
是否有一种方法可以防止绝对定位的元素在设置overflow-y时触发滚动条？我的印象是不会，因为绝对定位元素通常不会影响父元素的宽度/高度。由于某些原因，这似乎并不重要，以确定是否显示一个滚动条时，溢出-y: auto设置。有没有一种不将下拉内容放在DOM中完全不同位置的方法来解决这个问题？我只想要那些通常会使
浏览 6提问于2015-03-24得票数 12
回答已采纳
4回答
继承父文本装饰
、、
我明白，如果有一个<div>，里面的所有东西都必须加下划线。但是对于具有单独类或id的嵌套<div>，即使选择了(none)也要继承？！？我才不信呢。这也发生在文本样式上，但不是颜色。
浏览 0提问于2015-05-22得票数 0
position: absolute;<div id="x">div 1</div>在div上，它的行为就像一个内联元素去掉这个属性，我们就会看到div的行为就像它应该做的那样，一个块元素。
我的</em
浏览 0提问于2015-07-14得票数 13
2回答
我尝试将inline元素定位为父inline元素的绝对位置。但是由于某些未知的原因，父元素比它看起来要大。如果您尝试以下操作，您将看到绝对右侧定位的元素将位于父元素的外部。如果你使用width: 100%，这也会是一个问题，这会使子元素比<
浏览 0提问于2017-06-20得票数 1
我在滚动的div中有一个Bulma下拉菜单，但我希望这个下拉菜单忽略周围div的边界。
在HTML中，我有一个包装div，它将overflow设置为scroll，还有一个内部div，它比外部div大，并且充当滚动内容。此外，这个div包含一个下拉列表，当它
浏览 0提问于2021-02-11得票数 0
据我所知，绝对定位元素() (.e.g.span style=“style=：绝对值”)将基于其祖先的位置上下文来定位，但是这个绝对定位元素不会为其子元素创建一个新的定位系统，对吗？，如果#1是正确的，那么有人能告诉我为什么允许父元素在文档中设置为绝对位置吗？(只需在引号中准确地搜索这一行，就
浏览 1提问于2012-05-04得票数 0
回答已采纳
1回答
为什么在本例中，如果将溢出设置为隐藏在父元素上，HTML5会使在子元素的高度计算上有所不同？如果没有HTML5文档类型和/或溢出，则显示文本时不隐藏文本。
浏览 0提问于2016-02-17得票数 0
回答已采纳
Internet 9没有正确显示绝对定位的元素。父元素是相对的，因此绝对元素应该是相对于父div的“绝对”元素。然而，它的行为更接近于“固定”行为。当我试图在涉及的元素上触发hasLayout时，它会显示所有内联的内容。
所讨论的元素是.
浏览 0提问于2012-04-27得票数 0
1回答
我在css网格中隐藏一个绝对定位的图像有困难。css-网格，具有重复的隐藏父元素。height: 100px; position: absolute; height: 100%;}
我需要子元素是相对父元素的全部宽度子元素都是一个图像，绝对定位，因此如果溢
浏览 4提问于2020-12-17得票数 0
我使用转换最大高度而不是高度的技术，因为内容高度不同，但我有一个问题。 在增长或收缩的元素中，我有一个绝对定位的溢出元素，我想在展开父元素时显示该元素。问题是，如果我只在元素未展开时将溢出设置为隐藏，它会因为转换而跳转。这是一支你可以看到它跳跃的笔： htt
浏览 10提问于2019-09-11得票数 1
我刚刚开始玩聚合物元素，请注意，我绝对不认为自己是一个web开发人员(所以HTML/CSS/Javascript并不是我的强项)。当div的内容是聚合物元素(即影子DOM)时，我很难制作一个动态高度div容器。我可以使用像素(即height: 250px)成功地更改CSS类中容器的高度，但是将高度属性更改为；height: auto或height: auto !important会产生意想不到的影
浏览 1提问于2014-08-26得票数 2
回答已采纳
我一直在学习如何从中做一个基本的下拉操作。据说我们可以通过将min-width设置为100%来改变下拉内容的宽度。效果很好。但是，如果我将position: relative更改为position: static，下拉内容最终会占用100%的窗口宽度。AFAIK width: 100%应该将宽度设置为父容器的100%。将父容器<
浏览 2提问于2016-02-09得票数 0
所以，我试着让一个下拉列表作为菜单的一部分。我有一个ul，在左边加了几个li元素，然后我想让安莉元素浮到右边。我以前是用相对位置来做这件事的，但现在我希望它能够溢出并显示在它下面的任何东西上。我发现了这个问题：，并发现您必须使用绝对位置才能使这种溢出发生。那我该怎么做？这是基本的代码结构： <li id="right_item1"/&
浏览 1提问于2016-04-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
