文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么将一个绝对的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
相关搜索:我如何使一个表元素水平溢出它的父容器？如何将父元素的宽度固定到它的一个子元素？为什么这个元素是空的，为什么它给了我一个input元素？如何获取一个元素的背景来显示它的父背景？使用javascript将一个元素的宽度设置为与其他元素相同是否将静态元素设置为下拉列表中的最后一个元素？将最后一个元素设置为多维数组中的第一个元素为什么它只接受数组中的第一个元素？可以将一个元素ref从子功能组件传递到它的父功能组件吗？一个div继承了它的父元素的宽度，这不是我想要的如何将一个元素的高度设置为等于另一个元素？(包含Codepen)绝对定位:一个元素扩展窗口,其他元素不影响它.两者都使用相同的代码:C为什么select在绑定到模型时会显示它的第一个元素有没有可能有一个嵌套的元素来避开它的父容器的overflow:hidden？当子数组只包含一个具有数字索引的元素时，php将展平为父元素JQuery :仅当所选元素是第一个元素(占位符)时，才将所有选择元素的样式设置为斜体我想在页面加载时将控制设置为DOM的一个元素我有一个关于.map的问题，它使用javascript将数组中的元素带入数组。一个包含自身的列表-为什么重置它的元素会影响第一层？我有一个JSON数组，在7角有4个元素，但是当我询问它的长度时，它显示为0
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

【CSS 学习笔记】CSS元素和布局

有且只有一个属性设为 auto： 如果三个属性中某个值设为 auto，而余下的两个属性设为特定的值，那么设置为 auto 的属性值会自动确定所需长度，从而使元素框的总宽度（上面提到的7种属性相加）等于父容器的...假设行内元素的内容区高 20px，但是 line-height 只有 14px，那么为该元素分配的高度只有 14px，就会出现内容去溢出的情况（覆盖其他的行元素）。...替换元素 替换元素的 margin, border. padding 会影响行内框的宽度和高度 可以对替换元素设置 width 和 height。如果不设置宽高，会使用元素本来的宽度和高度。...有效值如下： 值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。...inline-block：会使元素表现的像行内非替换元素一样，是行内元素，但是可以设置宽高，margin, border, padding 会影响行内框的高度 run-in：使某些块级元素成为下一个元素的行内元素

1.1K20

    • CSS(五)

    设置父容器的 overflow: hidden 属性，可以使父容器仍然容纳浮动元素，如下图所示。 2. 让父元素也浮动。(这种做法需要额外设置父容器宽度) 3....: 溢出隐藏: 如父容器设置了 height 属性，而子元素超出父容器高度，使用 overflow: hidden 可以隐藏溢出部分 清除浮动: 使用 overflow: hidden 使得父容器仍然包含浮动子元素...一个 static 元素表示它不会被 “positioned”，一个 position 属性被设置为其他值的元素表示它会被 “positioned”。...在一个相对定位(position属性的值为relative)的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。...如果绝对定位(position 属性的值为 absolute)的元素没有 “positioned” 祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。

    1K20

    寒假提升 ｜ Day9 CSS 第七部分

    定位元素(positioned element) position值不为static的元素 也就是position值为relative、absolute、fixed的元素 子绝父相（了解） 在绝大数情况下...) 子元素设置position: absolute 简称为“子绝父相” 当然，也有 子绝父绝 子绝父固 不要死记 1.2. position设置absolute/fixed特性 将position设置为...粘性定位 sticky 另外还有一个定位的值是position: sticky，比起其他定位值要新一些. sticky是一个大家期待已久的属性; 可以看做是相对定位和固定(绝对)定位的结合体; 它允许被定位的元素表现得像相对定位一样...认识浮动 float 属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。...(右)浮动，浮动元素的左(右)边界不能超出包含块的左(右)边界 浮动规则三 规则三: 浮动元素之间不能层叠 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素(左浮找左浮

    78820

    这是对position讲解最通俗易懂的版本了。

    一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。... 在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置...如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。...如果它是 position: static; ，那么它的绝对定位子元素会跳过它直接相对于body元素定位。 这个元素是绝对定位的。...它相对于它的父元素定位。 这部分比较难理解，但它是创造优秀布局所必需的知识。下一页我们会使用 position做更具体的例子。

    98760

    104道 CSS 面试题，助你查漏补缺（下）

    将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。...，将父级元素设置为相对定位。...将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。...-（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。...-（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。 101.css 三栏布局的实现？

    2.4K30

    前端学习笔记—CSS

    解决方法见文章下方浮动解析，如设置父元素清除浮动 设置float浮动后的元素不会出现内部子元素上下margin合并问题，也可以清除第一个子元素上边距和最后一个子元素下边距被父元素剥夺问题 内容溢出问题...定位 定位元素（positioned element）是其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素（换句话说，除static以外的任何东西）。...相对定位元素（relatively positioned element）是计算后位置属性为 relative的元素，会占用原来位置并留下空白。...绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 的元素。绝对定位必须是作用于父级或往上的层级非static模式的布局里面才生效。...粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。 注：所有的定位都是同一层级。建议大模块用浮动，微调用定位。

    12310

    【面试题】104道 CSS 面试题，助你查漏补缺（下）

    将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。...，将父级元素设置为相对定位。...将右边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。...-（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。...-（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。 101.css 三栏布局的实现？

    2.5K40

    css必知的几个底层知识和技巧

    常见的内联元素有：display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域：可以理解为文本选中的背景色区域(重点) 内联盒子：内联标签或者纯文本...120px; box-sizing: border-box; 2.对于内联元素，padding对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条...box尺寸时触发滚动条显示 2.margin合并条件 块级元素，但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 *...解决方案： 父级设置为块级格式化上下文元素 父元素设置border-top/bottom值 父元素设置padding-top/bottom值 父元素设置高度 空块级元素margin合并 3.margin...的非替换元素的垂直margin是无效的 对于内联替换元素，垂直margin有效，并且没有margin合并问题，所以永远不会发生margin合并 内联特性导致margin失效：一个容器里面有一个图片，图片设置

    2.1K20

    容易被误解的overflow:hidden

    overflow:hidden的父元素之外，但是它依然被显示了。...而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。 理论依据 那么，这个原理到底是什么呢？...简单翻译一下： 此属性(overflow)规定，当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它（此属性）影响被应用元素的所有内容的剪裁。...但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。 即使是我重新整理过的语言，还是感觉有点绕。...翻译： 一个绝对定位的后代块元素，部分位于容器之外。

    3.5K110

    如何把控css的方向感

    常见的内联元素有：display设置为inline,inline-block,inline-table的元素 内联盒模型: 内容区域：可以理解为文本选中的背景色区域(重点) 内联盒子：内联标签或者纯文本...行框盒子：由内联盒子组成的一行，每一行就是一个行框盒子 包含盒子：由行框盒子组成的盒子 幽灵空白节点：在HTML5文档声明中，内联元素的解析和渲染表现就像每个行框盒子的前面有一个空白节点一样。...对视觉层和布局层都会有影响，如果父元素设置overflow:auto,则内联子元素的垂直padding可能会使父元素出现滚动条，否则如果父元素不设置设置overflow，只会在垂直方向上发生重叠，不会影响布局...但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并的三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 * 解决方案： 父级设置为块级格式化上下文元素...的非替换元素的垂直margin是无效的 对于内联替换元素，垂直margin有效，并且没有margin合并问题，所以永远不会发生margin合并 内联特性导致margin失效：一个容器里面有一个图片，图片设置

    1.2K10

    面试官：CSS 面试题集锦

    z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 该属性设置一个定位元素沿着 z 轴的位置，z 轴定义为垂直延申到显示区的轴，如果为正数，则离用户更加近...再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 div 且 class 中有 ready 的元素，就把原来的元素从集合中删去。...，即display:inline的作用即可以将一个块级元素转换成行内元素，那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。...它的特殊之处在于它不用像absolute疯狂“找爸爸”，它天生参照于浏览器窗口！当为对象设置固定定位后，该对象即处于浏览器窗口画面中的固定位置，无视文档长短、窗口大小和滚条滚动。...transform使浏览器为元素创建一个 GPU 图层 translate改变位置时，元素依然会占据其原始空间 而改变绝对定位会触发重新布局，进而触发重绘和复合。 改变绝对定位会使用到 CPU。

    3.3K30

    104 道 CSS 面试题 - 知识点总结

    回答： flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。...将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。...，将父级元素设置为相对定位。...-（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。...-（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。 101.css 三栏布局的实现？

    4.3K10

    CSS常见样式（一）

    补充：如果想让一个元素可以设置宽度高度，又让它以行内形式显示，我们可以设置display的值为inline-block。 2、什么是 CSS 继承? 哪些属性能继承，哪些不能？...解决文本溢出问题，我们需要设置两个属性： white-space: nowrap ，强制文本在一行内显示 overflow: hidden ，将溢出内容改为隐藏 { white-space: nowrap...; overflow: hidden; } 补充：若想将溢出内容显示为省略标记......最后我们还需要设置text-overflow属性： text-overflow: ellipsis ，将文本溢出内容显示为省略标记...在使用“em”作单位时，一定需要知道其父元素的设置，因为“em”就是一个相对值，而且是一个相对于父元素的值。...这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

    1.7K30

    104道 CSS 面试题，助你查漏补缺

    回答： flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex 容器，它的所有子元素都会成为它的项目。...将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。...，将父级元素设置为相对定位。...-（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位。左边元素设置为 absolute 定位，并且宽度设置为 200px。将右边元素的 margin-left 的值设置为 200px。...-（4）第四种还是利用绝对定位的方式，将父级元素设置为相对定位。左边元素宽度设置为 200px，右边元素设置为绝对定位，左边定位为 200px，其余方向定位为 0。 101.css 三栏布局的实现？

    1.8K10

    wxss学习系列《一》定位（position），布局(Layout)

    元素扔保持其未定位前的形状，它原来所占的空间扔保留。 3.absolute：元素框从文档流中删除，并相对于其包含块定位，包含快可能是文档中的另一个元素或者初始包含块。...4.fixed：元素框的表现类似于将position 设置为absolute，不过其包含块是视窗本身。 5.inherit：继承父元素的position位置。...六.clip：剪裁绝对元素定位。定义一个剪裁矩形，内容多出来的东西将根据overflow的值来处理。注意点：必须将position设置为absolute或者fixed的时候此属性才会生效 1.取值。...（小程序推荐使用伸缩盒子） 3.inline：指定对象为内联元素。 4.inline-block：指定对象为内联块元素。 5.inline-flex：将对象作为内联块级弹性伸缩盒显示。...6.inline-table：指定对象作为内联元素级的表格。 7.list-item：指定对象为列表项目。 8.none：隐藏对象。不占物理位置。 9.table：指定对象最为块元素级的表格。

    2.5K100

    CSS小技能:常用样式属性、选择器分类、盒子模型

    访问过后的样式设置 定位相关样式 1） position: absolute 绝对定位:相对父标签的左上角坐标进行定位 relative 相对定位：相对当前标签默认出现的位置进行偏移 2...是每个元素默认的属性 相对定位 (Relative positioning) 允许我们相对于元素在正常的文档流中的位置移动它 绝对定位 (Absolute positioning) 将元素完全从页面的正常布局流...我们可以将元素相对于页面的元素边缘固定，或者相对于该元素的最近被定位祖先元素 (nearest positioned ancestor element)。...固定定位 (Fixed positioning) 将一个元素相对浏览器视口(viewport,网页的可视区域)固定，而不是相对另外一个元素。...positioning） 如果想相对于父节点进行定位：最好设置父节点的position为relative， 原则“子绝父相”。

    1.8K10

    二、CSS

    css元素溢出 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。 overflow的设置项：  1、visible 默认值。...解决内联元素间隙的方法  1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size 内联块元素 内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的...，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。...4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素 5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素 6、E:nth-of-type(n)：匹配父元素的第n...个类型为E的子元素 7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反） 8、E:first-of-type：匹配父元素的第一个类型为E的子元素 9

    1.8K70

    常见的几种 CSS 水平垂直居中解决办法

    三、把容器当作表格单元 table可以设置vertical-align，自然能实现居中，所以我们可以模拟出一个table 使用display:table和display:table-cell的方法，前者必须设置在父元素上...，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个元素： html,body,div {margin: 0;padding:...在Internet Explorer 6中对父元素进行定位后，如果再对子元素 进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的...2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。 3.在Windows Phone设备上不起作用。...up no space 3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为

    1.2K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券