开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

绝对定位的div元素会影响文档流结构。为什么？

绝对定位的div元素会影响文档流结构，是因为它脱离了正常的文档流，不再占据文档中的位置，从而影响了其他元素的布局。

通常情况下，HTML文档中的元素会按照其在HTML源代码中出现的顺序依次排列，这种排列方式称为文档流。元素的位置和大小会相互影响，从而构成了页面的布局。

但是，当一个元素被设置为绝对定位时，它会从文档流中脱离出来，不再占据任何位置。绝对定位的元素会根据其相对于父元素或文档的定位属性（例如top、left等）来确定自己的位置。这导致其他元素在布局时会忽略该绝对定位的元素的存在，从而影响了文档流结构。

绝对定位的div元素可以使用CSS的position属性进行设置，常用的取值有：

static（默认值）：元素遵循正常的文档流布局，不进行特殊定位。
relative：元素相对于其正常位置进行定位，仍然占据文档流中的位置。
absolute：元素相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档进行定位，不占据文档流中的位置。
fixed：元素相对于浏览器窗口进行定位，不随页面滚动而变化，不占据文档流中的位置。

总结起来，绝对定位的div元素会影响文档流结构，是因为它脱离了正常的文档流布局，不再占据文档中的位置，从而影响了其他元素的布局。这在某些情况下可以实现特殊的页面布局效果，但需要注意使用时可能会对整体的布局产生意外影响。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云定位服务：提供精准、可靠的定位能力，满足各类定位场景需求。了解更多信息，请访问：https://cloud.tencent.com/product/lbs
腾讯云云服务器CVM：提供安全、弹性、高性能的云服务器，满足各种计算需求。了解更多信息，请访问：https://cloud.tencent.com/product/cvm
腾讯云数据库CDB：提供高性能、高可用的数据库服务，支持多种数据库引擎。了解更多信息，请访问：https://cloud.tencent.com/product/cdb

相关搜索:CSS -绝对定位元素后恢复正常的文档流将绝对元素定位到文档的右侧:0 使绝对定位div下的元素可单击随着div的滚动，绝对元素也会滚动计算固定元素中绝对定位的div中固定div的宽度为什么绝对定位的指示器会离开相对定位的容器？使用下面的内容定位流中的绝对切换元素为什么绝对定位的元素要扩展父元素的高度如何将div中的绝对定位元素居中？相对Div元素未注册到绝对定位的子级绝对定位的元素在相对div中未正确对齐隐藏:绝对定位的元素之后，并在其后面转换div元素为什么绝对定位的“内容可编辑”元素会在overflow:hidden元素中移动其他绝对元素？创建一个div，该div不影响页面上其他元素的定位为什么我的标题样式会影响我的内容div？为什么#杂注包也会影响结构自身的对齐？为什么我绝对定位的div中的背景图像不显示？为什么<button>中的绝对定位与<div>的工作方式不同为什么在定位的祖先上设置溢出会影响其相对定位的子代的位置？当绝对定位的HTML元素到达父元素的边缘时，它仍然会缩小

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 定位布局 - 相对、绝对、固定三种定位

absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。...而相对定位的布局是不会影响文档流布局的。假设我想要使用相对定位对绿色的div进行偏移，那么就是根据绿色div的文档流布局的位置进行相对偏移的。 ? 假设想要达到上图的偏移效果，该怎么做呢？ ?...> absolute绝对定位示例 absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到...在上面相对定位的示例中，元素相对定位是基于文档流原来的位置进行偏移定位的。那么，绝对定位是基于什么的呢？将刚才关于设置相对定位的代码改为绝对定位看看。 ?...定位元素层级 z-index 定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级。 为什么需要元素的层级呢？

3.5K4 0

脱离文档流分析（转）

先来了解一下block元素和inline元素在文档流中的排列方式。　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。...脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。只有绝对定位absolute和浮动float才会脱离文档流。 ...相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。...（3）绝对定位定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。...另外要注意：仅使用margin属性布局绝对定位元素的情况此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。

1.3K2 0

网页布局基础

由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点：在同一行内显示，不会改变HTML文档结构）组成。...2.元素仍处于文档流中，这也就意味着它会占据标准文档流的空间。...2.完全脱离了标准文档流，元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节。...3.当元素设置为绝对定位后，元素也会多出两类属性：偏移量属性和 Z-index属性，与相对定位不同的是：该元素已经脱离了标准文档流（不占位）建立的定位基准不是该元素的原来位置，而是分两种情况...>自适应宽度的列（因为绝对定位的元素会导致父元素高度塌陷，所以一定要保证固定宽度列的高度>自适应宽度的列，才能让绝对定位元素放进父容器里）

1.8K2 0

详解清除浮动的多种方式（clearfix）

1.什么是浮动首先我们需要知道定位元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式 1、普通流定位 static（默认方式）普通流定位，又称为文档流定位，是页面元素的默认定位方式...：relative 配合着偏移属性(top/right/bottom/left)实现位置的改变 4、绝对定位 absolute 如果元素被设置为绝对定位的话，将具备以下几个特征 1、脱离文档流...1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位 2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动) 3、...由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。...容易掌握简单易懂弊端：会添加许多无意义的空标签，有违结构与表现的分离，不便于后期的维护方案3 设置父元素浮动优势：简单，代码量少，没有结构和语义化问题弊端：对后续元素会有影响

1.5K6 0

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度外边距其他元素所占空间的影响

间距变为20px，这时候margin已经不重叠了五.浮动/定位对其他元素物理空间的影响这首先要提到我们经常挂在耳边的一个词——“脱离文档流” 脱离文档流 == 不占据元素的空间（物理上） .div2...其中float,position:absolute/fixed能够脱离文档流，而position:relative不能够脱离文档流在这里，我们把脱离文档流的那一部分元素归为“浮动流”，而把没有脱离文档流的那一部分元素归为...3.浮动流本身并不会影响标准流元素的定位,但是却影响着标准流文本的定位如果我们仔细看一下五中开头的demo会发现一个难以忍受的bug: ?..."div4"这个文本不是被包裹在div4这个元素里面吗，为什么被浮动元素div2“怼”下来了？刚刚不是还说好浮动 ==脱离文档流 == 不占其他元素的物理空间的吗？对啊，这里说的是元素，并不是文本。...【实现思路】：正如上面所说，浮动会脱离文档流从而不占据其他元素的物理位置,而我们让div1向左浮动了，这表示我们在考虑div2的布局的时候完全可以把div1当作不存在。

2.1K11 0

FLOAT坍塌原理及解决方案

定位方案的三种流普通流：包括对块级框的块格式，对行级框的行格式，对块级框和行级框的相对定位；浮动：在浮动模型中，一个框先按照正常排版来摆放，再将它从排版流中取出并尽可能地向左或向右偏移，其它内容可以排在一个浮动的周围...；绝对定位：在绝对定位模型中，一个框会从排版流中完全脱离出来（它对后续的兄弟没有影响），并相对其包含块来指定其位置（包括 absolute, fixed ）。...简单来说，BFC建立了一个隔离的空间，隔断空间内外元素的相互作用，内部元素相互影响并按正常的布局来排列，同时BFC作为一个块级元素在其所在的文档流中被处理。...BFC创建条件：根元素或其它包含它的元素；浮动（float不为 none)；绝对定位元素（absolute或fixed)；行内块 inline-blocks 表格单元格 display: table-cell...浮动的特性浮动框可以左右浮动，直到它的外边缘遇到包含框或者另一个浮动框的边缘；浮动框脱离了文档的常规流，文档的常规流会忽略浮动框的存在；浮动框不会影响到块级框的布局，但影响内联框的排列；当浮动框高度超过包含框的时候

4322 0

CSS布局

绝对定位相对定位可以看作特殊的普通流定位，元素位置是相对于他在普通流中位置发生变化，而绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。...因为绝对定位与文档流无关，所以绝对定位的元素可以覆盖页面上的其他元素，可以通过z-index属性控制叠放顺序，z-index越高，元素位置越靠上。...固定定位 fixed属性了，应用fixed也叫固定定位，固定定位是绝对定位的中，固定定位的元素也不包含在普通文档流中。...�下面看几个例子：不浮动 �红块向右移动红块向左移动，绿块被覆盖都向左浮动，父元素宽度为0 卡住的情况行框和清理前面指出浮动会让元素脱离文档流,不影响不浮动元素.实际上并不完全如此,如果浮动的元素后面有一个文档流中元素...,那么这个元素的框会表现的像浮动元素不存在,但是框的文本内容会受到浮动元素的影响,会移动以留出空间.用术语说就是浮动元素旁边的行框被缩短,从而给浮动元素流出空间,因而行框围绕浮动框。

1.1K2 0

《CSS 世界》读书笔记-流与宽高

流 CSS 中，有一个隐形的基本定位和布局机制，那便是 “流”。在网络上，随便搜索一篇 CSS 教程，基本都会提到 “普通流” 和 “文档流”，还有 “文本流” 这些关键词，有时候经常会弄混淆他们。...所谓的文档流，实际就是普通流，在 W3C 的规范中并没有 “document flow”，只有 “nomal flow”，之所以出现普通流和文档流，很可能是早期对英文文档的不同翻译而造成的混淆。...正是由于 “块级元素” 具有换行特性，因此理论上它都可以配合 clear 属性来清除浮动带来的影响。点击内联元素：inline element 与块级元素负责结构不同，内联元素负责内容。...只要经过一定的实践，我们都会发现对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。 4.3 为何父级没有具体高度值的时候，height: 100% 会无效呢？...使用绝对定位时，需要注意绝对定位的宽高百分比计算是相对于 padding box 的，也就是说会把 padding 大小值计算在内，但是，非绝对定位元素则是相对于 content box 计算的。

1.3K2 0

CSS基础-定位：static, relative, absolute, fixed

在网页布局的世界里，CSS定位是构建页面结构不可或缺的一环。四种基本的定位类型——static、relative、absolute、fixed，每种都有其独特的应用场景和行为特点。...1. static定位概述：static是元素的默认定位方式，意味着元素按照正常的文档流排列，不会受到top, bottom, left, right属性的影响。...2. relative定位概述：relative定位让元素保持在文档流中的位置，但可以通过偏移量（top, bottom, left, right）调整位置，不影响其他元素布局。...3. absolute定位概述：absolute定位使元素完全脱离文档流，依据最近的一个非static定位祖先元素（或body）进行定位。...常见问题：定位基准：忘记或误解绝对定位的参照物，导致元素出现在意料之外的位置。覆盖问题：绝对定位元素容易覆盖其他内容，未适当调整z-index。

1151 0

CSS中重要的BFC概念

CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。...浮动(Floats) 左浮动元素尽量靠左、靠上，右浮动同理这导致常规流环绕在它的周边，除非设置 clear 属性浮动元素不会影响块级元素的布局但浮动元素会影响行内元素的布局，让其围绕在自己周围，...绝对定位(Absolute positioning) 绝对定位方案，盒从常规流中被移除，不影响常规流的布局；它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；...如果元素的属性position为absolute或fixed，它是绝对定位元素；对于position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute...这里问题来了：我们知道设置position和float会让元素脱离文档流并且又创建新的BFC，所以两个元素就不是相邻元素了，因此可以阻止相邻元素margin合并，但是inline-block、inline-flex

1.4K1 1

HTML+CSS高级

三、清除浮动 1、清除浮动的原因： 1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局 2、... 不脱离文档流 1.1.3 如果没有定位偏移量，对元素本身没有任何影响 1.1.4 提升层级 1.2... absolute 绝对定位 1.2.1 使元素完全脱离文档流 1.2.2 使内嵌支持宽高-----absolute...三、清除浮动 1、清除浮动的原因： 1.1 子元素有浮动时，父级元素将保不住子元素（脱离文档流且提升层级半层），此时父级元素高度不能被撑开，影响布局 2、... 不脱离文档流 1.1.3 如果没有定位偏移量，对元素本身没有任何影响 1.1.4 提升层级 1.2

5.8K6 1

CSS魔法堂：你一定误解过的Normal flow

然后会看到"绝对定位和浮动定位能脱离文档流"，从这句可以看到文档流和绝对定位、浮动定位是同一个范畴的概念，再后来在W3C标准文档找到关于Absolute positioning和Float的内容，却怎么也找不到...Document flow(文档流)的资料。...当我们采用绝对定位或浮动定位时，就没有必要再讨论IFC和BFC了。那么说绝对定位和浮动定位会让元素产生新的BFC又是怎么说呢？我是这样理解的。...首先绝对定位和浮动定位必须产生新的BFC，就想根元素会产生默认的BFC那样，供采用常规流的块级子孙盒子使用。...其实我有个疑问：那就是为什么一个文档可以有多个BFC，却只有一个IFC呢？

6397 0

margin为负值产生的影响

而margin-top为负值的时候,不会增加高度,而是会让元素上移. margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度....文档流的影响那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。...总结，不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流对浮动影响负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面上面的问题，就是由于这个原因产生的解决方案...：让设置负边距的元素，脱离文档流。...或者让受影响的元素不浮动，不脱离文档流对定位影响对于绝对定位的元素,设置了margin负值之后,会根据它定位的位置进行再位移。

5961 0

前端入门4-CSS属性样式表声明正文-CSS属性样式表

但这里需要注意一点，虽然浮动元素会造成重叠的现象，但这只是正常的文档流的元素盒子被浮动元素压住了，但文档流元素的文本内容会自动围绕在浮动元素周围，就像上图中块级元素四个字并没有被覆盖住。...也就是说，浮动元素并不会造成文档流的内容被覆盖的情况，反而它会影响到它之后文档流中元素的内容区域的显示排版。如果不想让后面的元素受到浮动元素的影响，那么就要进行浮动清除处理。...应用场景：微调让后代元素可以使用绝对定位通常都是用来给后代使用绝对定位的，因为固定定位和绝对定位都会导致该元素从文档流中脱离，就像浮动元素那样，不再占用文档流的坑位。...而相对定位并不会，所以通常父类元素设置了相对定位，而让后代元素使用绝对定位，这样可以让后代元素可以脱离文档流，达到压盖的效果，同时还可以受限于父类元素的范围管控。...因为绝对定位是将元素脱离出标准文档流，那么绝对定位的元素显示与否，并不会影响到原本的文档流元素，所以，通常一些弹窗框，弹窗控制面板，可在页面上任意拖放的元素等都会通过绝对定位来做。

1.6K3 0

第3天：CSS浮动、定位、表格、表单总结

下面是主要知识点：一、float浮动 1、块元素在一行显示 2、内联元素支持宽高 3、默认内容撑开宽度 4、脱离文档流 5、提升层级半层二、clear清除浮动 1、加高（扩展性不好）给浮动元素的父级设置同样的高度...normal) 四、position定位相对定位（relative） 1、不影响元素本身的特性 2、不使元素脱离文档流（元素移动之后原始位置会保留） 3、如果没有定位偏移量，对元素本身没有任何影响 4...、提升层级绝对定位（absolute） 1、使元素完全脱离文档流 2、使内嵌支持宽高 3、块属性内容撑开宽度 4、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于document发生偏移 5、...相对定位一般都是配合绝对定位元素使用 6、提升层级一般来说，父级相对定位，子级绝对定位。...固定定位（fixed） 1、固定右下角 position:fixed; right:0; bottom:0; 与绝对定位特性基本一致。始终相对整个文档进行定位；IE6不支持固定定位。

1.6K4 0

CSS 布局_3 Position元素定位

，而不论该元素本身是什么类型，相对定位元素会相对于它在正常流中的默认位置偏移注释：IE6 不支持该属性，IE7 开始支持值描述 static 默认值，没有定位，元素使用正常的布局行为，即元素在文档流中当前的布局位置... 从运行结果可以知道，向左移动的元素已经超出了浏览器窗口的显示范围了，定位元素所在的位置需要通过 left,top,right 以及 bottom 属性进行规定，偏移时不会影响文档流中的任何元素...，则一直回溯到 body 元素，元素的偏移位置不影响文档流中的任何元素，其 margin 不与其他任何 margin 折叠元素设置 position:absolute; 绝对定位之后，脱离文档流，不占据文档流的空间位置...，行元素可以设置宽高，块元素宽度由 100% 变为 auto，脱离文档流，不占据文档流的空间位置，不会影响其他元素的布局 body { background-color: coral; height... 设置了 position: relative 的元素依然在文档流中，依旧占据空间位置，只不过可以通过设置 left,right 等属性来移动元素，这种移动是会影响其他元素的位置的

9264 0

关于定位position的相关知识

例如平时的弹窗、黑色蒙版层、返回顶部、微博等网站顶部的导航条~~~ 相对定位和绝对定位是否会让元素脱离文档当对一个元素设置了position:absolute和position:fixed时，会让该元素脱离文档流...如果元素设置了position:relative，根据W3C官方文档上来说，并不会脱离文档流，也不会有布局上的问题，但是在实际开发中的情况则是：元素不会脱离文档流，但是是可以设置top、left等值进行操作...设置绝对定位的元素，会脱离文档流，如下例子 HTML5学堂 - H5course - 绝对定位会脱离文档流 <link...元素设置position:absolute时，针对哪个元素定位设置属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。

9405 0

CSS布局基础(待补充完整)

1 文档流要了解css的布局，就要先了解什么是文档流。文档流就是HTML元素的一种排列规则。而正常文档流就是在不用样式控制之下，html元素的默认排版方式。...2-2 文字环绕浮动虽然浮动元素脱离了文档流，但并不是不对正常流文档元素产生影响。...与其他正常文档流不产生效果 2-3 清除浮动嗯？为什么还要清除浮动？直接不浮动就行了啊？...3 定位布局这也是脱离文档流的一种方式，它通过显式的设置定位坐标及大小来实现 3-1 position:fixed 这个比较简单，是相对于浏览器而言，导航栏通常就这么用；直接脱离文档流，别的元素将会无视它并且挤上来...3-3 position:absolute 绝对定位，也是直接脱离文档流，别的元素将会无视它并且挤上来 3-4 position:static 默认定位，也是每一个元素的初始定位，也就是正常文档流

3781 0

HTML和CSS常见问题整理

position: 指定一个元素在文档中的定位方式，top，right，bottom和 left 属性则决定了该元素的最终位置。...值描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。...元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。...center的div需要放到后面，将左右两边使用absolute定位，因为绝对定位使其脱离文档流，最后面的center会显示在正常文档流中，然后设置margin属性，留出左右两边的宽度。...需要放到后面，对左右使用float:left和float：right，float使左右两个元素脱离文档流，中间的正常文档流中，然后设置margin属性，留出左右两边的宽度。

1.5K3 0

CSS定位概述

CSS中有三种基本的定位机制：普通流，浮动和绝对定位。...2.绝对定位：absolute 相对定位实际上依然是存在文档流中，但绝对定位则会使元素脱离文档流，绝对定位的元素是相对于距离他最近得已定位的祖先元素确定的，如果元素没有已定位的祖先元素，那么它的位置是相对于初始包含块的...浮动同样会使元素脱离文档流。 ? ? 上面说浮动会使元素脱离文档流，文档流中的元素会将其当做不存在，实际上并非如此。当下一个元素存在文本内容时，文本内容会受到浮动元素的影响，会移动留出空间，实际上。...解决办法通常有三种： 1.添加一个新的div空元素在news里面，并对其设置clear属性，浏览器会自动赋予外边距。如图：缺点：添加无意义的元素。 ...2.也可以对父元素添加overflow:hidden属性，该属性会自动清理包含的任何浮动元素。缺点：可能会对原来的布局有所影响，例如增加滚动条或截断内容。 3.使用js代码动态控制。

9232 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭