首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么绝对定位的“内容可编辑”元素会在overflow:hidden元素中移动其他绝对元素?

绝对定位的元素是相对于其最近的具有定位属性(position属性值为relative、absolute、fixed或sticky)的父元素进行定位的。当一个绝对定位的元素设置了"内容可编辑"属性,并且其父元素设置了overflow:hidden属性时,可能会出现其移动其他绝对定位元素的情况。

这是因为设置overflow:hidden属性的父元素创建了一个新的块级格式化上下文(Block Formatting Context,BFC)。BFC是一个独立的渲染区域,其中的元素布局不会影响到外部元素。当一个元素被设置为BFC时,其内部的浮动元素、绝对定位元素和非块级盒子的块级盒子将参与到BFC的布局中。

在这种情况下,"内容可编辑"的绝对定位元素被移动到overflow:hidden元素中,是因为它参与了BFC的布局。这导致其与其他绝对定位元素的定位发生了变化。

解决该问题的方法有几种:

  1. 使用其他属性替代overflow:hidden,例如使用overflow:auto来滚动内容,或者使用overflow:visible来允许内容超出父元素。
  2. 将"内容可编辑"元素移动到overflow:hidden的父元素之外。
  3. 调整元素的布局逻辑,避免使用绝对定位和overflow:hidden同时存在的情况。

推荐腾讯云相关产品: 腾讯云提供了丰富的云计算产品和解决方案,其中与前端开发和网页布局相关的产品是“腾讯云小程序开发”,该产品提供了小程序的开发、发布和运营能力,可以帮助开发者快速构建小程序应用,具体介绍请参考腾讯云小程序开发产品介绍:链接地址

请注意,腾讯云小程序开发并非直接解决上述问题的产品,而是为前端开发者提供了一种快速构建小程序的方式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

容易被误解overflow:hidden

overflow:hidden并不隐藏所有溢出元素 对于overflow:hidden最大误解时:当一个具有高度和宽度中至少一项容器应用了overflow:hidden时,其内部任何溢出内容都将被剪裁...这个大家其实比较熟悉,一个绝对定位元素,其包含块是最近拥有relative或者absolute定位属性祖先元素,如果任何一级祖先元素都不符合,则其包含块是body元素(更正:浏览器内容区域)。...这就说明,一个绝对定位元素是否被overflow:hidden隐藏,要看其包含块相对于overflow:hidden位置来决定。这就好比驻日美军,他们不受日本法律约束而受美国军法约束。...回到我demo,overflow元素位于相对定位元素绝对定位元素之间,因此根据规定它不能剪裁绝对定位元素。也就是说爷爷相对定位,老爸规定溢出隐藏,可是儿子是绝对定位元素。...这样万一某一天你看到overflow:hidden里面的东东居然被显示出来了,你才知道是为什么

3.4K110

快速理解BFC原理

绝对定位 (absolute positioning) 在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体位置由绝对定位坐标决定。...它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素关系和相互作用。 那么 BFC 是什么呢?...具有 BFC 特性元素可以看作是隔离了独立容器,容器里面的元素会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。...为 inline-block、table-cells、flex overflow 除了 visible 以外值 (hidden、auto、scroll) 四、BFC 特性及应用 1....,触第二个元素 BFC 特性,在第二个元素中加入 overflow: hidden,就会变成: 这个方法可以用来实现两列自适应布局,效果不错,这时候左边宽度固定,右边内容自适应宽度(去掉上面右边内容宽度

62520
  • 《CSS世界》第六章 流破坏与保护总结

    高度塌陷是为了让跟随内容可以和浮动元素在一个水平线上。(行框盒子在正常定位状态下只会跟随浮动元素,不会发生重叠) clear属性 clear属性让自身不能和前面的浮动元素相邻。...但在其他浏览器下会让元素尺寸包裹收缩。 overflow overflow裁剪边界是border box内边缘,而非padding box内边缘。...URL地址中锚链与锚点元素对应(a标签以及name属性)并有交互行为 focus锚点元素处于focus状态 锚点定位本质通过改变容器滚动高度或者宽度实现。...锚点定位发生在普通容器元素上,定位行为是由内而外。 设置了overflow: hidden;元素也是可以滚动,只是滚动条不见了而已。...注意,只有原本是内联水平元素才有这种情况 absolute与overflow 绝对定位元素不总是被父级overflow属性剪裁,尤其当overflow绝对定位元素及其包含块之间时候。

    78330

    前端知识点总结(html+css)(上)

    常见块级元素、行内元素、行内块元素特点和区别 块级元素 (常见块级元素div,p,h,form,li) 一行显示一个; 宽度默认为容器100%; 可以设置高度宽度内外边距 块级元素可以包含其他块级元素和文本...(如div下包含div) 行内元素(常见行内元素a,span.img) 一行显示多个 宽度为内容宽度 不可以设置高度和宽度 标签内一般不包含标签(如a标签内包含a标签) 行内块元素 行内块元素包含块级元素和行内元素特征...visibilty:hidden //隐藏对应元素,在文档中仍保留位置 opacity:0 //隐藏元素,占位置,添加事件 9. css中overflow属性 scroll //必会出现滚动条...auto //子元素内容大于父元素,显示滚动条,超出显示,不超出不显示 visible //溢出内容出现在父元素之外 hidden //溢出隐藏 10....(margin:auto实现绝对定位元素居中) 这里是div .center { width: 200px

    31710

    关于BFC理解

    《CSS权威指南》中指出,浮动目的,最初只能用于图像,就是为了允许其他内容(如文本)“围绕”该图像。而后来CSS允许浮动任何元素。...绝对定位绝对定位布局中,元素会整体脱离普通流(浮动布局可以理解成脱离父元素文本流),因此绝对定位不会对其兄弟元素造成影响,而具体位置由绝对定位坐标决定。...它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素关系和相互作用。...触发BFC条件 下面的方式会创建块格式上下文: 根元素或包含根元素元素,这里我理解为body元素 浮动元素元素float不是none) 绝对定位元素元素position为absolute或fixed...形成了BFC区域不会与float box重叠(阻止因浮动元素引发文字环绕现象) 计算BFC高度时,浮动元素也参与计算(BFC会确切包含浮动元素,即闭合浮动) 注意⚠️,对于第五点,原本浮动元素是应该脱离文档流

    98830

    CSS深入理解学习笔记之overflow

    ios原生滚动回调效果:-webkit-overflow-scrolling:touch; 3、Overflow与块状格式上下文    块级格式上下文(BFC):具体内容参考BFC(块级格式上下文)...与absolute绝对定位   在absolute定位下,overflow隐藏和滚动会失效。   ...原因:绝对定位元素不总是被父级overflow属性裁剪,尤其当overflow在就对定位元素及其包含块(含position:relative/absolute/fixed声明父级元素,没有则是body...锚点:就是标签ID。     锚点定位:通过锚链定位锚点位置。   (2)锚点定位本质     在页面滚动容器中,通过锚链滚动到其对应锚点元素,即改变容器滚动高度。     ...(3)锚点定位触发     ①url地址中锚链与锚点元素;     ②focus锚点元素处于focus状态;   (4)锚点定位作用     ①快速定位     ②选项卡技术     ③单页应用

    4.1K50

    css面试点二:BFC(块级格式化上下文)+常见布局方案

    绝对定位 (absolute positioning) 在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体位置由绝对定位坐标决定。...它是页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素关系和相互作用。...浮动元素绝对定位元素,非块级盒子块级容器(例如inline-blocks``table-cells和table-captions),以及overflow值不为visiable块级盒子,都会为他们内容创建...BFC触发条件:   【1】根元素,即HTML元素   【2】float值不为none   【3】overflow值不为visible(overflow其他值:hidden、auto、scroll...BFC清除浮动 浮动元素是会脱离文档流(绝对定位元素会脱离文档流)。 如果一个没有高度或者height是auto容器元素是浮动元素,则该容器高度是不会被撑开

    50020

    BFC(块级格式化上下文)与常见布局方案

    绝对定位 (absolute positioning) 在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体位置由绝对定位坐标决定。...BFC定义: 浮动元素绝对定位元素,非块级盒子块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable...”块级盒子,都会为他们内容创建新BFC(块级格式化上下文)。...BFC清除浮动 浮动元素是会脱离文档流(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto容器元素是浮动元素,则该容器高度是不会被撑开。...; margin: 10px; } 未添加overflow: hidden 添加overflow: hidden 阻止元素被浮动元素覆盖 <div style="height: 100px;

    55230

    每天10个前端小知识 【Day 18】

    :规定当文本溢出时,显示省略符号来代表被修剪文本 white-space:设置文字在一行显示,不能换行 overflow:文字长度超出限定宽度,则隐藏超出内容 overflow设为hidden,...核心css代码结构如下: position: relative:为伪元素绝对定位 overflow: hidden:文本溢出限定宽度就隐藏内容) position: absolute:给省略号绝对定位... 实现原理很好理解,就是通过伪元素绝对定位到行尾并遮住文字,再通过 overflow: hidden 隐藏多余文字 这种实现具有以下优点: 兼容性好,对各大主流浏览器有好支持...-webkit-box-orient: vertical:和1结合使用 ,设置或检索伸缩盒对象元素排列方式 overflow: hidden:文本溢出限定宽度就隐藏内容 text-overflow...在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体位置由绝对定位坐标决定。

    14010

    定位深入理解与应用

    特点 不会像浮动一样脱离文档流,只是视觉上效果,不会对其他元素产生影响 定位元素层级比层级元素高,所有定位层级相同: 定位元素会覆盖在普通元素上。...这使得布局更具可控性和预测性。 相对定位 如何设置绝对定位元素设置 position: absolute 即可实现绝对定位。...粘性定位参考点 离它最近一个拥有“滚动机制”祖先元素,即便这个祖先不是最近真实滚动祖先 滚动祖先: 使用overflow属性用来设置滚动机制 overflow: visible...overflow: hidden;:内容被剪裁,超出部分不可见。 overflow: scroll;:内容被剪裁,显示滚动条。 overflow: auto;:根据内容是否超出自动显示滚动条。...滚动属性(特别是 overflow: auto;)可以在元素内容超出容器时提供滚动条,使用户能够滚动查看全部内容,与粘性定位结合使用时,可以在固定位置时仍然允许内容查看和操作。

    9110

    clearfix改良及overflow:hidden详解

    overflow 在众多关于清除浮动讨论中,出现了overflow:hidden方法,并且这种方法总是被“如果你把绝对定位元素置于div内部,这些元素(超出部分)将会被隐藏”观点击败。...overflow:hidden 会修剪相对定位(position:relative)元素,但并不总是会隐藏绝对定位元素。...… 这意味着一个带有overflow:hidden样式盒子,它所包含绝对定位元素如果溢出,并不会被隐藏——除非该绝对定位元素包含块(containing block)就是这个盒子本身或位于该盒子内部...也就是说,如果这个绝对定位元素包含块层级高于拥有overflow:hidden样式盒子,那么这个盒子里面的绝对定位元素不会被截断或隐藏。...作者提供了一个demo 页面演示这个原理(页面上wrapper设定了overflow:hidden,但是绝对定位元素box1却显示在了wrapper外面的左上角,并没有被隐藏)。

    1.3K80

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

    方法一、使用 line-height 这种方式更多地用在 单行文字情况,其中使用overflow:hidden设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了 <style type...在Internet Explorer 6中对父元素进行定位后,如果再对子元素 进行百分比计算时,计算基础似乎是有继承性(如果定位数值是绝对数值没有这个问题,但是使用百分比计算基础将不再是该元素...> 如果我们对subwrap进行了绝对定位/相对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进 行相对定位时候,...,内容流中其余部分渲染时绝对定位部分不进行渲染。...简而言之(TL;DR):绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置边界内垂直居中 这样一来

    1.2K10

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

    3.如何让元素支持height:100%效果 知识点:绝对定位宽高百分比是基于padding-box,而非绝对定位宽高百分比是基于content-box 方法如下: * 1.设置显示高度值 *...2.使用绝对定位 4.任意高度元素展开收起动画(max-height/min-height) 1.min-height/min-width初始尺寸为auto, max-height/max-width...,padding对视觉层和布局层都会有影响,如果父元素设置overflow:auto,则内联子元素垂直padding可能会使父元素出现滚动条,否则如果父元素不设置设置overflow,只会在垂直方向上发生重叠...: 1em; } 3.padding实际应用(具体实现自行思考) 1.增加链接或按钮点击区域大小 2.利用内联元素padding实现高度可控分割线 3.用内联元素实现瞄点定位距离 4.利用padding...box尺寸时触发滚动条显示 2.margin合并条件 块级元素,但不包含浮动和绝对定位元素 在默认文档流下只出现在垂直方向 margin合并三种场景 相邻兄弟元素 父级和第一个/最后一个子元素 *

    2.1K20

    CSS笔记(15)

    display隐藏元素后,不再占有原来位置(和绝对定位一样特征). 后面应用及其广泛,搭配JS可以做很多网页特效....visibility隐藏元素后,继续占有原来位置(和相对定位一样特征) 如果隐藏元素想要原来位置,就用visibility : hidden....如果隐藏元素不想要原来位置,就用display : none 原图 隐藏后 3.overflow溢出 overflow属性指定了如果内容溢出一个元素框(超出其高度及宽度)时,会发生什么....但是如果有定位盒子,请慎用overflow:hidden.因为它会隐藏多余部分....下面做一个土豆网案例 当鼠标经过时,显示遮罩层和播放图标 这时就要用到我们隐藏和显示知识了,遮罩层应该是整个盒子一个子元素,不占有位置,因此要使用绝对定位,而元素隐藏使用是display

    1.1K10

    纯CSS实现拖拽--resize、scale、包裹性

    overflow 指定除 visible (默认值)以外值(hidden/scroll/auto)将创建一个新 块级格式化上下文(BFC)。...这在技术层面上是必须——如果一个浮动元素和滚动条相交,它会在每个滚动步骤后强行重新包装内容,从而导致慢滚动体验。...收缩与包裹 width 默认值为 auto,其有4种不同表现: 充分利用空间: 宽度默认是100%于父级容器; 收缩与包裹:浮动、绝对定位(absolute、fixed)、inline-block...中文是随便断,英文单词不能断; 超出容器限制:内容很长连续英文和数字,或者元素被设置了white-space: nowrap; 格式化宽度: 绝对定位(absolute、fixed)元素,默认情况下宽度表现是...包裹性: 元素尺寸由内部元素决定,但永远小于“包含块”容器尺寸。inline-block元素、浮动元素以及绝对定位元素都具有包裹性! 示例:文字少居中显示;文字超过一行居左展示。

    3.4K20

    纯CSS实现拖拽--resize、scale、包裹性

    overflow 指定除 visible (默认值)以外值(hidden/scroll/auto)将创建一个新 块级格式化上下文(BFC)。...这在技术层面上是必须——如果一个浮动元素和滚动条相交,它会在每个滚动步骤后强行重新包装内容,从而导致慢滚动体验。...收缩与包裹 width 默认值为 auto,其有4种不同表现: 充分利用空间: 宽度默认是100%于父级容器; 收缩与包裹:浮动、绝对定位(absolute、fixed)、inline-block...中文是随便断,英文单词不能断; 超出容器限制:内容很长连续英文和数字,或者元素被设置了white-space: nowrap; 格式化宽度: 绝对定位(absolute、fixed)元素,默认情况下宽度表现是...包裹性: 元素尺寸由内部元素决定,但永远小于“包含块”容器尺寸。inline-block元素、浮动元素以及绝对定位元素都具有包裹性! 示例:文字少居中显示;文字超过一行居左展示。

    3K10

    CSS 笔记 盒模型和布局方式

    默认情况下溢出部分仍然可见,可以使用overflow调整溢出部分显示,取值如下: image.png 取值 作用 visible 默认值,溢出部分可见 hidden 溢出部分隐藏...设置clear:both;清除浮动 为父元素设置overflow:hidden;解决高度为0 定位布局 结合偏移属性调整元素显示位置 属性 position 取值 可取relative(相对定位...距参照物顶部 right 距参照物右侧 bottom 距参照物底部 left 距参照物左侧 分类 relative 相对定位元素设置相对定位,参照元素在文档中原始位置进行偏移...,不会脱离文档流 absolute 绝对定位绝对定位元素参照离他最近已经定位祖先元素进行偏移,如果没有,则参照窗口进行偏移 绝对定位元素会脱流,在文档中不占位,可以手动设置宽高 fixed...固定定位 参照窗口进行定位,不跟随网页滚动而滚动 脱离文档流 使用绝对定位:“父相子绝” : 父元素设置相对定位,子元素绝对定位,参照已定位元素偏移.

    1.1K10

    十分钟狠狠地拿下CSS中BFC

    什么是BFC 块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染一部分,是块盒子布局过程发生区域,也是浮动元素其他元素交互区域。...BFC在三种布局方式(正常布局流,浮动,绝对定位)中属于正常布局流 如何触发BFC 只要元素满足下面任一条件即可触发 BFC 特性: body 根元素 浮动元素:float 除 none 以外绝对定位元素...:position (absolute、fixed) display 为 inline-block、table-cells、flex overflow 除了 visible 以外值 (hidden、auto...、scroll) 最常用是给父元素设置 overflow:hidden BFC特点 内部Box会在垂直方向一个接着一个地放置。...常用办法是overflow:hidden .container

    35011

    ipad上100vh和100%踩坑记「建议收藏」

    最近遇到了一个小bug,在ipad上编辑word文件虚拟键盘收回时,会导致页面的导航条隐藏,且页面的下面会出现一块空白 自己尝试解决方案 通过focusin和focusout对虚拟键盘弹入弹出进行监听...另一种方法是:监听一个事件,比如我监听就是scroll事件,对会发生隐藏元素设置scrollIntoView或者scrollIntoViewIfNeeded,通过设置不同参数,可以使得作用元素与视口上面或下面对齐...另外,如上面的代码所示,父元素设置了display:flex, 子元素设置了flex: 1,按理说,子元素设置了这个属性之后,就和父元素宽高相同了,但是要注意,在这里,子元素还设置了position:...我们看一下W3C文档怎么说 即,flex容器中绝对定位元素会脱离flex布局流,也就是说flex: 1对子元素来说已经失效了。...因此他高度为绝对定位100%设置高度,但是又设置了overflow:hidden,因此才会在虚拟键盘隐藏时出现一部分空白,从而导致了导航条隐藏。

    1.2K10

    html、css总结

    原因:当父元素没有设置足够大小时,而子元素设置了浮动属性,子元素就会跳出父元素边界(脱离文档流),尤其是当父元素高度为auto时,而父元素中又没有其他非浮动可见元素时,父盒子高度就会直接塌陷为零...;有可能出现滚动条,影响美观 Overflowhidden;可能会带来内容不可见问题 4.父盒子里最下方引入清除浮动块 缺点:引入不必要多余元素 5....After伪类清除浮动 外部盒子after伪元素设置clear属性 推荐使用 IE标准盒子模型(怪异盒模型) 相当与css3属性中box-sizing里面的content-box Width里面所指内容是...1.两个值为正数,去较大 2.两个值为负数,取绝对绝对值较大 3....一正一负,取两个值和 解决方式 1.给父元素加边框 2.让父元素浮动 3.给父元素绝对定位 4.加内边距 5.转为行内块元素 6.Overflowhidden; 7.Overflow:auto;

    1.1K20
    领券