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

为什么在定位的祖先上设置溢出会影响其相对定位的子代的位置?

在CSS中,定位是指通过设置元素的position属性来控制元素在文档中的位置。常见的定位方式有相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。

当一个元素被设置为相对定位(relative)时,它会相对于其正常位置进行偏移,但仍然占据原来的空间。而当一个元素的祖先元素被设置为溢出(overflow)时,会影响相对定位的子元素的位置。

这是因为溢出属性会创建一个新的块级格式化上下文(Block Formatting Context),而相对定位的元素会相对于其最近的块级格式化上下文进行定位。当祖先元素设置了溢出属性时,它会创建一个新的块级格式化上下文,导致相对定位的子元素的定位参考对象发生改变,从而影响子元素的位置。

具体来说,当祖先元素设置了溢出属性时,其子元素的定位参考对象会从原来的祖先元素变为新创建的块级格式化上下文,这可能导致子元素的位置发生偏移。例如,如果祖先元素的溢出属性导致其高度减小,那么相对定位的子元素的位置可能会向上偏移。

需要注意的是,这种影响只会发生在相对定位的子元素上,绝对定位和固定定位的子元素不会受到祖先元素溢出属性的影响。

总结起来,当在定位的祖先元素上设置溢出属性时,会创建一个新的块级格式化上下文,从而影响相对定位的子元素的位置。这种影响是由于相对定位的元素的定位参考对象发生改变所导致的。

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

相关·内容

前端课程——定位继承与层叠

定位 定位属性为position static: 默认值,表示元素为静态定位。指定元素使用正常布局行为,即元素文档常规流中当 前布局位置。 absolute: 表示元素为绝对定位。...不为元素预留空间,通过指定元素相对于最近非static定位 先元素偏移,来确定元素位置。 fixed: 表示元素为固定定位。...元素先放置未添加定位位置,再在不改变页面布局前提 下调整元素位置。...简单来说定位就是规定被定位元素距离页面顶部及左边距离 绝对定位 开启后脱离文档流 不设置位置偏移量则位置不会变化 偏移量 正值(top)向下 负值(top)向上 绝对定位集中情况 如果当前元素父级元素是...脱离文档流 相对定位 不脱离文档流 相对于自身原来位置进行定位 堆叠 z- index属性指定了一个具有定位属性元素及其子代元素z -order。

88731

Vue2.脚手架

7897 https://registry.npmmirror.com注册表,设置仓库位置,这个是淘宝仓库。...该元素根据文档正常流程定位,然后根据顶部、右侧、底部和左侧值,相对最近滚动祖先和包含块(最近块级祖先)进行偏移,包括与表格相关元素。偏移不会影响任何其他元素位置。...该值始终会创建一个新堆叠上下文。请注意,粘性元素 "粘附 "到离它最近、具有 “滚动机制”(溢出为隐藏、滚动、自动或叠加时创建)先上,即使该祖先不是离它最近、实际滚动祖先。...粘性定位元素是一种计算位置值为粘性元素。...它被视为相对定位元素,直到包含块在其流根(或滚动容器)内越过指定阈值(如将顶部设置为自动以外值),此时它被视为 "粘住 "元素,直到遇到包含块对边。

10610

CSS3入门

,但是影响页面响应速度,不建议使用 样式两个特性 层叠性:多个选择器设置样式可以叠加在同一标签上 当样式出现冲突时,优先考虑权重;权重相同情况下,采用就近原则 继承性:子标签继承父标签某些样式...visibility 方式隐藏元素页面中仍然占据空间 overflow 溢出 设置父盒子宽高情况: 父盒子只有宽没有高,且内部都是另一个浮动盒子 hidden|auto : 清除浮动,父盒子自适应子盒子高...相对定位 相对定位(relative)是元素相对于自己标准流中原来位置 不会放弃它在标准流中占据位置 *{ position: relative; } 绝对定位 绝对定位(absolute...)是以带有定位(相对、绝对、固定)父级元素来计算定位位置 如果父元素没有定位,则找父级父级,..…. 。...固定定位 固定定位就是将盒子定位到页面的固定位置 固定定位也是投标,只认浏览器可视窗口 { position: fixed; } 堆叠 定位让盒子重叠,后面的盒子压住前面的盒子 z-index

1.6K10

详解 清除浮动 多种方式(clearfix)

甚至有些时候都忘了用他做文字环绕 3、相对定位 relative 元素相对于它原来位置偏移某个距离,改变元素位置后,元素原本空间依然会被保留 语法 属性:position 取值...-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于 最近定位祖先元素实现位置固定 4、如果没有已定位祖先元素,那么就相对于最初包含块(body,html)去实现位置固定...方案2 父元素中,追加空子元素,并设置clear属性为both clear是css中专用于清除浮动属性 作用:清除当前元素前面的元素浮动所带来影响 取值: 1、none 默认值...疑问 为什么margin边距重叠?...overflow:hidden, 语义应该是溢出:隐藏,按道理说,子元素浮动了,但依然是父元素里,而父元素高度塌陷,高度为0了,子元素应该算是溢出了,为什么没有隐藏,反而撑开了父元素高度?

1.3K60

青瞳视觉联合创始人厚超:大空间是表现形式,从“定位”到“专业级动作捕捉系统”

例如青瞳,采用了IK反算或结合传感器等方式,来减少遮挡带来影响。 互动娱乐新形式——“大空间” 虽然被动红外光学动捕系统存在一些问题,但厚超认为优势依旧很明显。...但具体该如何去打造“大空间”,厚超认为:“由于每一家公司背景不同,思路也不一样。”简单来说,每家公司“大空间”上定位和方向是不同。...例如青瞳视觉主要研究定位,那么“大空间”便是青瞳定位系统一种表现形式。 厚超一再强调,对于青瞳视觉来说,核心一直都是:思考如何做好自己定位系统,开发出更贴近大空间场景下动捕解决方案。...厚超介绍道:“目前‘大空间’解决方案,从设备、场地、人员、内容等方面来说,成本都是比较高。” 为详细说明,厚超举了个例子。一次大空间游戏体验中,需要准备设备除定位以外,还有很多。...厚超紧接着表示:场地和人员成本也很高,尤其是北上广地区,优质地段租金成本将更高。 ? 或许是因为大空间开发成本高昂,其内容相对主流VR游戏来看较为单一。

1.1K20

前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素显示与隐藏…

不脱离标准流 相对于自身位置偏移relative ## 相对定位 不脱离标准流 相对于自身位置偏移 <!...相对定位 是元素相对于它,标准流中位置 + 边偏移属性 来设置元素位置 相对定位以 自己标准流位置左上角为基点 + 边偏移属性,定位元素新位置 */ position: relative...absolute 绝对定位有两个重要概念 1、完全脱标 —-完全不占位 2、父元素要有定位 —- 父元素标准六中位置 + 边偏移属性 来设置 元素位置 <!...: orange; /*相对定位 绝对定位寻找离他最近父元素位置偏移*/ position: relative; } /*子代选择器*/ .son > div{ width:...注意 绝对定位不能通过设置margin:auto 设置水平居中 底部居中 <!

3.5K20

CSS 实用手册

外边距溢出, 特殊场合下,为子元素设置外边距(上下)作用到父元素上 特殊场合: a. 父元素没有边框(上下) b. 为第一个(最后一个)子元素设置外边距 解决方案: a....直接设置父元素高度, 弊端:必须知道父元素高度 (2). 让父元素也浮动 弊端:对后续元素产生影响 (3)....父元素中,增加空子元素到最后一个位置处,并且设置 clear 属性为 both 弊端:多一个子元素页面上 45. position:relative 相对定位,元素相对于它原来位置偏移某个距离...绝对定位特点: ①. 绝对定位元素脱离文档流即不占据页面空间 ②. 绝对定位元素相对于离它最近定位祖先元素去实现定位 ③....如果没有已定位祖先元素,那么就会相对于最初包含块去实现定位比如 body 或html ④. 绝对定位元素变成块级元素 ⑤.

2.7K10

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

绝对定位布局中,元素整体脱离普通流,因此绝对定位元素不会对兄弟元素造成影响,而元素具体位置由绝对定位坐标决定。...,如果没有则相对于body; 对于 position:fixed,正常来说是相对于浏览器窗口定位,但是当元素祖先 transform 属性非 none 时,相对于该祖先进行定位。...浮动 (float) 浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左边或右边偏移,效果与印刷排版中文本环绕相似。...普通流中,元素按照 HTML 中先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行。块级元素则会被渲染为完整一个新行。...除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素位置由该元素 HTML 文档中位置决定。

11710

CSS 笔记 盒模型和布局方式

属性 float 取值 可取left或right,设置元素向左浮动或向右浮动 float: left/right; 特点 元素设置浮动从原始位置脱流,向左或向右依次停靠在其他元素边缘,文档中不再占位...,影响页面布局 解决 对于内容固定元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏) 父元素末尾添加空块元素。...设置clear:both;清除浮动 为父元素设置overflow:hidden;解决高度为0 定位布局 结合偏移属性调整元素显示位置 属性 position 取值 可取relative(相对定位...距参照物顶部 right 距参照物右侧 bottom 距参照物底部 left 距参照物左侧 分类 relative 相对定位:元素设置相对定位,可参照元素文档中原始位置进行偏移...,不会脱离文档流 absolute 绝对定位: 绝对定位元素参照离他最近已经定位祖先元素进行偏移,如果没有,则参照窗口进行偏移 绝对定位元素脱流,文档中不占位,可以手动设置宽高 fixed

1.1K10

CSS样式

contain 保持图片纵横比并将图像缩放成适合背景定位区域最大大小 background-position属性:该属性设置背景图像起始位置默认值是:0% 0% 值 说明 left top...(如果剩余自由空间是负,则弹性项目将在两个方向上同时溢出) align-items 属性:align-items 设置或检索弹性盒子元素侧轴(纵轴)方向上对齐方式 align-items: flex-start...相对定位 absolute 绝对定位 fixed 固定定位 其中,绝对定位和固定定位脱离文档流 设置定位之后:可以使用四个方向值进行调整位置:left、top、right、bottom 相对定位,...绝对定位相对于离他最近开启了定位祖先元素进行定位(一般情况,开启了子元素绝对定位都会同时开启父元素相对定位)如果所有的祖先元素都没有开启定位,则会相对于浏览器窗口进行定位 固定定位永远都会相对于浏览器窗口进行定位...,固定定位固定在浏览器窗口某个位置,不会随滚动条滚动 z-index属性设置元素堆叠顺序。

23830

前端面试实录CSS篇(最近一周)

,有一套渲染规则,它决定了子元素如何定位,以及其他元素关系和相互作用。...• absolute: 绝对定位元素位置相对于最近定位父元素,如果元素没有已定位父元素,那么它位置相对于 • relative: 相对定位元素定位相对正常位置 • fixed: 元素位置相对于浏览器窗口是固定位置...• inherit: 规定从父元素继承 position 属性 • sticky: 基于用户滚动位置定位 • 前面三者定位方式如下: • relative:元素定位永远是相对于元素自身位置,...imgfixed:元素定位相对于 window (或者 iframe)边界,和其他元素没有关系。但是它具有破坏性,导致其他元素位置变化。...imgabsolute:元素定位相对于前两者要复杂许多。如果为 absolute 设置了 top、left,浏览器根据什么去确定它纵向和横向偏移量呢?

9510

CSS

overflow:值 值可选:visible 内容不会被修剪,呈现在元素框之外,hidden 内容会被修剪,并且溢出内容是不可见,scroll 内容会被修剪,但是浏览器显示滚动条以便查看溢出内容...,auto 如果内容被修剪,则浏览器显示滚动条以便查看溢出内容, inherit 从父元素继承overflow值 overflow还可以写成overflow-x(设置水平方向,只出现x轴滚动条...  1,static,默认值,无定位,为标签设置top,left等值都没作用   2,relative(相对定位相对定位相对于该元素文档流中原始位置,在这种情况下,虽然原来位置没有了内容...3,absolute(绝对定位设置为绝对定位元素框从文本流出来,也就不会占据原来位置,同时也会出现父级塌陷现象,绝对定位相对于父级位置(父级必须是relative,也就是父级要是相对定位...我们为层叠元素设置一个z-index值,值大盖住值小,如果没有设置z-index,写在后面的压着前面的 z-index:值 值为正整数就行 只有定位元素才有z-index 从父现象:父级

1.4K11

青瞳视觉联合创始人厚超:自然式交互才是VR交互最终形态

编者按:虽然交互是影响VR沉浸感非常重要因素,但专注于交互方案研究VR厂商并不多见,而青瞳视觉正是其中之一。...为了全面地了解青瞳视觉红外光学位置追踪系统,小编于近日来到了上海大学(延长校区)青瞳视觉所在地,与青瞳视觉联合创始人厚超聊聊VR交互新形势和新发展。 ?...青瞳视觉联合创始人厚超 青瞳视觉成立于2015年,是一家专注于交互方案研究VR厂商,自主研发红外光学位置追踪系统被广泛应用于军工、医疗、教育、生命科学工程、影视动画制作,VR游戏等领域。 ?...小编体验《星核》 采访开始前,为了让小编对于青瞳视觉红外光学动作捕捉系统有更直观地了解,厚超邀我们体验了与星核VR主题公园合作打造VR体验——《星核》。...在室内定位空间中,安装多个内置红外闪光灯摄像机,通过捕捉被追踪物体上红外反光点,以此确定位置信息。 ?

1.4K70

CSS快速入门(四)

relative定位 absolute定位 fixed定位 overflow溢出属性 层级属性z-index 透明度设置 综合案例 CSS快速入门(四) 浮动 float属性 用于设置元素是否浮动...什么是脱离文档流 观察标签位置改变之后,原来位置是否空出来,如果空出来了被其他标签自动占有,那么表示是脱离文档流否则不脱离; 脱离文档流 不脱离文档流 浮动、绝对定位、固定定位 相对定位 定位两种方法...relative(相对定位):相对标签原来位置定位 absolute(绝对定位相对已经定位父标签做定位(没有则参考body标签),参考小米官网导航条内购物车 fixed(固定定位):相对浏览器窗口做定位...上述static定位示例代码中,将box1设置以下属性,元素相对于自身原始位置向右偏移20px,向下偏移50px .box1 { position: relative; top...层级属性z-index 用于设置元素堆叠顺序,该属性仅能在非static定位定位元素上生效,数值越高,层级越高,层级高元素覆盖层级低元素(层级高元素会在层级低元素上方) 通俗理解为,

54920

「学习笔记」CSS基础

定位 将盒子定在浏览器某一个位置——CSS 离不开定位,特别是后面的 js 特效。 「2. 什么是浮动」元素浮动是指设置了浮动属性元素 脱离标准普通流控制,不占位置,脱标 移动到指定位置。...静态定位在布局时几乎不用 「4. 相对定位(relative)」 相对定位是元素相对于它原来标准流中位置来说。...相对于自己原来标准流中位置来移动 原来标准流区域继续占有,后面的盒子仍然以标准流方式对待它。 「5....堆叠顺序(z-index) 使用「定位」布局时,可能「出现盒子重叠情况」。 加了定位盒子,默认「后来者居上」, 后面的盒子压住前面的盒子。...1.3 overflow 溢出 检索或设置当对象内容超过指定高度及宽度时如何管理内容。

3.2K30

HTML+CSS练习题【详解】

固定定位元素跟随浏览器滚动条进行滚动 B. 绝对定位元素参考设置定位(非静态)父元素或者级元素进行定位对齐 C. 静态定位是元素默认定位方式,不需要设置 D....相对定位元素保留自身在标准流中位置,并且为绝对定位子元素提供参考 关于绝对定位、固定定位相对定位和静态定位,下列说法正确是( ) A. 固定定位参考设置定位父元素进行对齐 B....相对定位参考元素本身在标准流以前位置进行定位 C. 静态定位可以设置 top 、left、right、 bottom值 D....绝对定位只会根据浏览器可视区域定位 下列关于定位属性及特点说法正确是 ( ) A. 绝对定位元素参考设置相对定位父元素进行定位 B. 固定定位参考设置定位父元素进行定位 C....绝对定位元素固定在页面某个位置, 不随着滚动条滚动而滚动 D. 绝对定位元素可以使用边偏移属性 固定定位元素位移参照物是( ) A. 自身原本位置 B. 参照浏览器可视区域 C.

21410

深入理解视觉格式化模型

现介绍两个绝对定位使用技巧: 1. 绝对定位元素,水平方向(top和bottom)或和垂直方向(left和right)定位值不设置时,位置前面的兄弟元素影响,如同常规流中位置。...如下例所示: 元素A,C绝对定位,不设置top,bottom值; 元素B处于常规流中; 结果是:元素C位置受元素B影响,跟随元素B下方。...一般为了水平居中会在水平方向上设置auto,为什么这种情况下,垂直方向上设置auto,导致垂直居中效果呢?...短语“一个框包含块”指的是“这个框存在其中包含块”,而非它生成框。 每个框相对包含块赋予位置,但它并不囿于包含块,可能溢出(overflow)。...一个框类型部分地影响视觉格式化模型中行为。

89790

深入理解视觉格式化模型( VISUAL FORMATTING MODEL)

现介绍两个绝对定位使用技巧: 1. 绝对定位元素,水平方向(top和bottom)或和垂直方向(left和right)定位值不设置时,位置前面的兄弟元素影响,如同常规流中位置。...如下例所示: 元素A,C绝对定位,不设置top,bottom值; 元素B处于常规流中; 结果是:元素C位置受元素B影响,跟随元素B下方。...一般为了水平居中会在水平方向上设置auto,为什么这种情况下,垂直方向上设置auto,导致垂直居中效果呢?...短语“一个框包含块”指的是“这个框存在其中包含块”,而非它生成框。 每个框相对包含块赋予位置,但它并不囿于包含块,可能溢出(overflow)。...一个框类型部分地影响视觉格式化模型中行为。

61530

css应知应会 第四集

弊端:不是再任何时候父元素都要跟着浮动,而且会对后续元素带来位置影响 3、为父元素设置overflow属性,取值为 auto 或 hidden 弊端:有要溢出显示内容...,也一同被隐藏了 4、父元素最后位置处,增加一个空子元素,并设置 clear:both 即可 5、... ... 2、显示 1、显示方式 1...1、什么是相对定位 元素相对于它原来位置偏移某个距离 经常会应用于元素位置微调 注意:元素原本所占据空间依然会被保留...绝对定位 1、什么是绝对定位 & 特点 将元素设置为绝对定位的话将具备以下特征 1、绝对定位元素脱离文档流-不占据页面空间...2、绝对定位元素相对于离他最近,已定位,祖先元素 去实现位置初始化 3、如果元素没有最近祖先元素的话,那么就相对于最初包含框(body)去实现位置初始化

1.2K30
领券